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.
Basics — Philosophy and environment (Ch. 1-3)
| # | Chapter | Overview |
|---|---|---|
| 01 | What is Tailwind CSS | The utility-first mindset and what is new in v4 |
| 02 | Setup | Four ways to set up: Vite / PostCSS / CLI / CDN |
| 03 | The utility-first mindset | Compared with traditional CSS, and taming HTML bloat |
Layout — The three pillars of placement (Ch. 4-6)
| # | Chapter | Overview |
|---|---|---|
| 04 | Flexbox layout | From the flex container to justify / align / gap |
| 05 | Grid Layout | grid-cols / col-span / subgrid |
| 06 | Spacing | Designing padding / margin / gap on a 4px scale |
Styling — Refining the appearance (Ch. 7-10)
| # | Chapter | Overview |
|---|---|---|
| 07 | Typography | Size / weight / line height / Japanese font considerations |
| 08 | Color system | Palette, opacity, oklch, and CSS variables |
| 09 | Backgrounds, borders & shadows | Gradients / radius / rings / dividers |
| 10 | Sizing and positioning | width / height / position / z-index / overflow |
Responsive and interaction — Motion and change (Ch. 11-15)
| # | Chapter | Overview |
|---|---|---|
| 11 | Responsive Design | Mobile-first and breakpoint design |
| 12 | State Variants | hover / focus / group / peer / has-* |
| 13 | Dark Mode | Comparing the three approaches, and avoiding FOUC |
| 14 | Container Queries | v4's built-in @container versus media queries |
| 15 | Animations | transition / transform / 3D / motion-safe |
Advanced — Finishing and implementation (Ch. 16-18)
| # | Chapter | Overview |
|---|---|---|
| 16 | Customization | Extending the theme with @theme / @utility / @plugin |
| 17 | Component Patterns | Buttons / cards / modals and more, with ARIA |
| 18 | Practical Project | Building a SaaS landing page |
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 learning guides fit together
This guide focuses on systematically learning CSS styling. Building UI is covered by the React Guide, and the language foundation by the TypeScript Guide. For which guide covers which stage across the whole site, see the Introduction.
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 React Guide — Tailwind CSS.
Now, let's start with the Introduction.