Beginner Tailwind

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.

What We'll Build

To see what we'll learn and build, visit the full site. We're going to design this whole site without any custom CSS.
Visit the Site We'll Build

What's included?

Video Icon 75 videos

Contents

Getting Started
Intro
2 mins
How I Design
11 mins
CodePen Tailwind Template
5 mins
CodePen Tips and Tricks
9 mins
Tailwind Docs and Workflow
5 mins
Tailwind Introduction
9 mins
Resources
4 mins
Main Concepts
Overview & What We'll Build
5 mins
Spacing w/ Margin and Padding
8 mins
Box Properties
9 mins
Sizing and Numbering System
6 mins
Typography
10 mins
Colors
8 mins
Pseudo Classes
4 mins
Transitions & Transforms
8 mins
Animations
3 mins
Restyling All the Things
9 mins
Gradients
6 mins
Layout Concepts
Layout and Positioning
8 mins
Responsive Classes
10 mins
Flexbox
13 mins
Grid
12 mins
Creating Components: Cards
Basic Card
11 mins
Card w/ an Image
13 mins
Horizontal & Responsive Card
12 mins
Creating Components: Buttons
Basic Buttons
13 mins
Outlined and Shadowed Buttons
7 mins
Grouped and w/ an Icon Buttons
13 mins
Creating Components: Forms
Basic Form
13 mins
Minimal Form
12 mins
Pure Color Form
12 mins
Building a Course Site
What We'll Build
3 mins
Setting Up Our Build System
18 mins
Purging Unused Classes
4 mins
Deploying to Netlify
9 mins
Tailwind in VS Code
7 mins
Setting Up HTML
5 mins
Header/Navigation Section
Header Layout
7 mins
Header Styling
8 mins
Header Responsive
4 mins
Hero Section
Hero Layout
8 mins
Hero Styling
14 mins
Hero Fun Elements
12 mins
Hero Responsive
5 mins
Overview Section
Overview Layout
7 mins
Overview Styling
12 mins
Overview Fun Elements
6 mins
Overview Responsive
4 mins
About Me Section
About Layout
8 mins
About Styling
7 mins
About Responsive
3 mins
What You'll Learn Section
What You'll Learn Layout
10 mins
What You'll Learn Styling
5 mins
What You'll Learn Fun Elements
11 mins
What You'll Learn Responsive
4 mins
What You'll Build Section
Layout + Styling + Responsive
11 mins
Pricing Section
Pricing Layout
9 mins
Pricing Styling
11 mins
Pricing Fun
9 mins
Pricing Responsive
7 mins
FAQ Section
Layout + Styling + Responsive
6 mins
Footer & Newsletter Section
Footer Layout
10 mins
Footer Styling
11 mins
Footer Fun
6 mins
Footer Responsive
5 mins
Fixes
Fixing Containers
4 mins
Adding Links
3 mins
Going Beyond
Customizing Tailwind
14 mins
Extracting Tailwind Styles
7 mins
Tailwind and Vue
13 mins
Tailwind Typography
7 mins
Tailwind Tools
5 mins
Video List Section
Videos Layout + Styling + Responsive
15 mins
Conclusion
Recap
2 mins
Outro
2 mins