Tailwind CSS Guide
About this guide
This is an 18-chapter guide for learning Tailwind CSS v4 systematically, from the basics to practice. From the utility-first mindset to implementing a SaaS landing page, you can learn in one continuous flow.
- Step by step: learn in the order philosophy → setup → layout → styling → responsive → advanced
- v4 ready: built on Tailwind CSS v4 (released in 2025), with its CSS-First Configuration / Oxide engine / built-in Container Queries
- Code-focused: each chapter provides HTML / CSS / TypeScript implementation examples and explains "why you do it that way"
- With a hands-on project: in the final chapter you build a SaaS landing page, from Hero / Features / Pricing / FAQ / CTA / Footer
Structure of the guide
Learning path
The guide is organized into five groups, progressing in order from the basics to practice.
| Group | Theme | Chapters | Overview |
|---|---|---|---|
| Basics | Philosophy and environment | 3 | Introduction / Setup / Utility-first |
| Layout | The three pillars of placement | 3 | Flexbox / Grid / Spacing |
| Styling | Refining the appearance | 4 | Typography / Colors / Backgrounds & borders / Sizing & positioning |
| Responsive and interaction | Motion and change | 5 | Responsive / State variants / Dark mode / Container queries / Animation |
| Advanced | Finishing and implementation | 3 | Customization / Component patterns / Hands-on project |
Recommended ways to read
- Beginners: read from top to bottom, running the code in each chapter as you go
- Experienced (with v3 background): check only the v4 changes in
introduction.md, then jump to whichever chapters interest you - As a reference: open the relevant chapter directly from the table above
- Project-based learning: copy the hands-on project by hand and look up the chapters you need
How the four learning guides fit together
This site has four structured learning guides. This guide focuses on systematically learning CSS styling.
| Axis | TypeScript Master Guide | Introduction to React | Tailwind CSS Guide (this guide) | Clean Code |
|---|---|---|---|---|
| Focus | Language spec | Framework | CSS styling | Design standards |
| Level | Beginner to intermediate | Beginner to intermediate | Beginner to intermediate | Intermediate and up |
| Prerequisite | JS basics | TS + JS | HTML/CSS basics | Any language |
| Example | "How to use mapped types" | "The dependency array of useEffect" | "Adding colors with @theme" | "Replace any with unknown + type guards" |
The four guides are complementary. Solidify your types with the TypeScript Master Guide, assemble your UI with Introduction to React, and polish your styling with this guide. On top of that, raise your code quality with Clean Code. That is the intended learning path.
Prerequisites
- Required: the basics of HTML / CSS (the concepts of selectors / class / display / flex / grid)
- Recommended: a basic understanding of modern build tools such as Vite (you can start a dev server with
npm run dev) - Not required: experience with PostCSS / Sass / CSS-in-JS (in this guide, everything is done with Tailwind utilities)
When combining with React, we recommend first learning the Tailwind system with this guide, then learning React-integration-specific patterns such as clsx and variant design in Introduction to React — Tailwind CSS.
Now, let's start with the Introduction.