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.
Beginner Tailwind
9h 33m 19s
English
Paid
About the Author: Chris Sev
Chris Sev is the founder of scotch.io, a popular web dev tutorial site. Scotch reaches 3M+ readers monthly and $30,000/mo in revenue.
Scotch.io was successfully acquired by DigitalOcean in 2019. Chris now focuses on helping others code so they can build/sell their own businesses.
He's a Google Developer Expert in Web Technologies and fights to keep coding simple and practical.
Watch Online 77 lessons
0:00
/ #1: Intro
All Course Lessons (77)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | Intro Demo | 01:26 | |
| 2 | Updated for Tailwind 2 | 00:54 | |
| 3 | How I Design | 10:28 | |
| 4 | CodePen Tailwind Template | 04:41 | |
| 5 | CodePen Tips and Tricks | 08:46 | |
| 6 | Tailwind Docs and Workflow | 04:26 | |
| 7 | Tailwind Introduction | 08:51 | |
| 8 | Resources | 03:21 | |
| 9 | Overview & What We'll Build | 04:25 | |
| 10 | Spacing w/ Margin and Padding | 07:09 | |
| 11 | Box Properties | 08:25 | |
| 12 | Sizing and Numbering System | 05:16 | |
| 13 | Typography | 09:38 | |
| 14 | Colors | 07:38 | |
| 15 | Pseudo Classes | 03:49 | |
| 16 | Transitions & Transforms | 07:24 | |
| 17 | Animations | 02:11 | |
| 18 | Restyling All the Things | 08:28 | |
| 19 | Gradients | 05:56 | |
| 20 | Layout and Positioning | 07:31 | |
| 21 | Responsive Classes | 09:09 | |
| 22 | Flexbox | 12:50 | |
| 23 | Grid | 11:58 | |
| 24 | Basic Card | 10:16 | |
| 25 | Card w/ an Image | 12:05 | |
| 26 | Horizontal & Responsive Card | 11:57 | |
| 27 | Basic Buttons | 12:43 | |
| 28 | Outlined and Shadowed Buttons | 06:51 | |
| 29 | Grouped and w/ an Icon Buttons | 12:14 | |
| 30 | Basic Form | 12:36 | |
| 31 | Minimal Form | 11:43 | |
| 32 | Pure Color Form | 11:16 | |
| 33 | What We'll Build | 02:57 | |
| 34 | Setting Up Our Build System | 11:30 | |
| 35 | Purging Unused Classes | 04:48 | |
| 36 | Customizing Colors | 04:44 | |
| 37 | Deploying to Netlify | 08:10 | |
| 38 | Tailwind in VS Code | 06:24 | |
| 39 | Setting Up HTML | 04:59 | |
| 40 | Header Layout | 06:17 | |
| 41 | Header Styling | 07:05 | |
| 42 | Header Responsive | 03:35 | |
| 43 | Hero Layout | 07:32 | |
| 44 | Hero Styling | 13:55 | |
| 45 | Hero Fun Elements | 11:16 | |
| 46 | Hero Responsive | 04:24 | |
| 47 | Overview Layout | 06:23 | |
| 48 | Overview Styling | 11:52 | |
| 49 | Overview Fun Elements | 05:21 | |
| 50 | Overview Responsive | 03:03 | |
| 51 | About Layout | 07:06 | |
| 52 | About Styling | 06:42 | |
| 53 | About Responsive | 02:48 | |
| 54 | What You'll Learn Layout | 09:25 | |
| 55 | What You'll Learn Styling | 04:31 | |
| 56 | What You'll Learn Fun Elements | 10:10 | |
| 57 | What You'll Learn Responsive | 03:27 | |
| 58 | Layout + Styling + Responsive | 10:47 | |
| 59 | Pricing Layout | 08:52 | |
| 60 | Pricing Styling | 10:31 | |
| 61 | Pricing Fun | 08:54 | |
| 62 | Pricing Responsive | 06:27 | |
| 63 | Layout + Styling + Responsive | 05:46 | |
| 64 | Footer Layout | 09:41 | |
| 65 | Footer Styling | 10:31 | |
| 66 | Footer Fun | 05:52 | |
| 67 | Footer Responsive | 04:14 | |
| 68 | Fixing Containers | 03:24 | |
| 69 | Adding Links | 02:11 | |
| 70 | Customizing Tailwind | 13:14 | |
| 71 | Extracting Tailwind Styles | 06:41 | |
| 72 | Tailwind and Vue | 12:52 | |
| 73 | Tailwind Typography | 06:56 | |
| 74 | Tailwind Tools | 04:35 | |
| 75 | Videos Layout + Styling + Responsive | 14:02 | |
| 76 | Recap | 01:57 | |
| 77 | Outro | 01:07 |
Unlock unlimited learning
Get instant access to all 76 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscription