English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 9h 33m | 2.24 GB
Make good looking designs quickly. All without a single line of custom CSS.
Tailwind makes writing CSS easier and lets us customize our designs faster than any other CSS framework. If you want a CSS framework that has pre-built components, then Tailwind may not be for you. If you want a CSS framework that lets you design quickly and customize your site, then Tailwind is gonna be a lot of fun.
After using Bulma to build Scotch.io, my CSS files became littered with my own!importantclasses to override the framework’s styles. Tailwind doesn’t have the !importantproblem since all our elements are designed on the fly.
Important Note: Tailwind lets us design quickly, but this doesn’t mean that you don’t need CSS knowledge however. To use Tailwind, you need to have a good understanding of CSS properties. In this course, we will learn Tailwind and we’ll also learn CSS conceptsto create good looking designs. Tailwind is the ultimate CSS shorthand, but we still need to learn the CSS, which we’ll do in this course.
“This isn’t just a Tailwind course. This is also a “learn how to design with CSS” course.
The hardest things about learning Tailwind is memorizing the classes and also knowing which classes go well together. We’ll be writing a lot of Tailwind in this course so that the repetition will help us commit Tailwind classes to memory.
Tailwind is an amazing CSS framework that changes the way we think about CSS frameworks.
Learn why Tailwind is amazing and how it speeds up designs and makes them look amazing.
Table of Contents
1 Intro
2 Updated for Tailwind 2
3 How I Design
4 CodePen Tailwind Template
5 CodePen Tips and Tricks
6 Tailwind Docs and Workflow
7 Tailwind Introduction
8 Resources
9 Overview & What We’ll Build
10 Spacing w/ Margin and Padding
11 Box Properties
12 Sizing and Numbering System
13 Typography
14 Colors
15 Pseudo Classes
16 Transitions & Transforms
17 Animations
18 Restyling All the Things
19 Gradients
20 Layout and Positioning
21 Responsive Classes
22 Flexbox
23 Grid
24 Basic Card
25 Card w/ an Image
26 Horizontal & Responsive Card
27 Basic Buttons
28 Outlined and Shadowed Buttons
29 Grouped and w/ an Icon Buttons
30 Basic Form
31 Minimal Form
32 Pure Color Form
33 What We’ll Build
34 Setting Up Our Build System
35 Purging Unused Classes
36 Customizing Colors
37 Deploying to Netlify
38 Tailwind in VS Code
39 Setting Up HTML
40 Header Layout
41 Header Styling
42 Header Responsive
43 Hero Layout
44 Hero Styling
45 Hero Fun Elements
46 Hero Responsive
47 Overview Layout
48 Overview Styling
49 Overview Fun Elements
50 Overview Responsive
51 About Layout
52 About Styling
53 About Responsive
54 What You’ll Learn Layout
55 What You’ll Learn Styling
56 What You’ll Learn Fun Elements
57 What You’ll Learn Responsive
58 Layout + Styling + Responsive
59 Pricing Layout
60 Pricing Styling
61 Pricing Fun
62 Pricing Responsive
63 Layout + Styling + Responsive
64 Footer Layout
65 Footer Styling
66 Footer Fun
67 Footer Responsive
68 Fixing Containers
69 Adding Links
70 Customizing Tailwind
71 Extracting Tailwind Styles
72 Tailwind and Vue
73 Tailwind Typography
74 Tailwind Tools
75 Videos Layout + Styling + Responsive
76 Recap
77 Outro
Resolve the captcha to access the links!