Introduction
A systematic learning guide for Tailwind CSS v4 in 18 chapters. From the utility-first mindset to Flexbox/Grid, typography, colors, responsive design, dark mode, container queries, and animation. You build a landing page in a hands-on project and acquire modern CSS styling.
What is Tailwind CSS
The introductory chapter of this Tailwind CSS v4 guide. It covers the utility-first mindset, how it differs from traditional CSS frameworks, an overview of v4 features such as CSS-First Configuration / the Oxide engine / built-in container queries, and the structure of the whole guide.
Setup
How to set up a Tailwind CSS v4 development environment in four ways — Vite / PostCSS / CLI / CDN. It covers supported-browser requirements, the VS Code extension (Tailwind CSS IntelliSense), class sorting with the Prettier plugin, and a guideline for production build size.
Utility-first
An explanation of the utility-first philosophy at the core of Tailwind CSS, compared with traditional CSS. It systematically organizes the class naming convention, the 4px-based spacing scale, and ways to address HTML bloat (componentization / @apply / @reference).
Flexbox layout
How to build Flexbox layouts with Tailwind CSS. From creating a flex container, it organizes flex-direction / flex-wrap / justify-content / align-items / gap / order in tables, then cements it with navigation bar / card / search form implementations.
Grid Layout
How to leverage CSS Grid with Tailwind CSS. It systematically covers grid-cols / grid-rows, col-span / row-span, place-items, grid-auto-flow, and subgrid support, then cements it with dashboard / card gallery / image grid implementations.
Spacing
Tailwind CSS's 4px-based spacing system. It compares padding / margin / gap / space-* / logical properties (ps/pe), and organizes negative margins for full-bleed layouts and v4's arbitrary-value syntax through practical examples.
Typography
How to style text with Tailwind CSS. It organizes font size (text-xs to text-6xl) / weight / family / line height / letter spacing / decoration / truncation (truncate, line-clamp) and considerations for Japanese fonts through practical examples.
Color system
Tailwind CSS's color palette (26 colors × 11 steps as of v4.2) and how to use it. It covers text / background / border / ring / opacity (the /N notation backed by color-mix) / v4's oklch color space / CSS variable integration (bg-(--my-color)) through practical examples.
Backgrounds, borders & shadows
A systematic look at backgrounds (including gradients), borders, rounded corners (border-radius), shadows, rings (focus), outlines, and dividers (divide) with Tailwind CSS. It also covers implementations of UI parts such as cards / buttons / hero sections.
Sizing and positioning
Systematizes element sizing (width / height / min-* / max-* / size-*), positioning (static/relative/absolute/fixed/sticky), z-index, object-fit, overflow, and aspect-ratio with Tailwind CSS. It also organizes implementation examples such as the three centering patterns, a fixed header, and a modal.
Responsive Design
Responsive implementation with Tailwind CSS's mobile-first approach. It organizes the sm/md/lg/xl/2xl breakpoints, max-* variants, v4 custom breakpoints, and arbitrary-value bracket notation through nav / hero / footer implementation examples.
State Variants
Systematically covers Tailwind CSS state variants (hover / focus / focus-visible / focus-within / active / disabled / invalid / checked), groups (group-*), peers (peer-*), pseudo-classes (first/last/odd/even), pseudo-elements (before/after), and has-*.
Dark Mode
Dark mode implementation with Tailwind CSS's `dark:` variant. It covers a comparison of the three approaches (media query / class-based / selector-based), FOUC mitigation, a recommended color mapping, and centralized theme color management with CSS variables, all through implementation examples.
Container Queries
An explanation of container queries, which gained native support in Tailwind CSS v4. It organizes the `@container` declaration, the @3xs–@7xl container breakpoints, named containers, the arbitrary-value `@[500px]:` notation, and when to use them versus media queries, all through implementation examples.
Animations
Animation implementation with Tailwind CSS. It organizes the basics of transition / duration / ease / delay, the scale / rotate / translate / skew transforms, v4 3D transforms (perspective / rotate-x/y/z), the built-in animate-* utilities, and motion-safe/reduce accessibility, all through implementation examples.
Customization
Putting Tailwind CSS v4's CSS-First Configuration into practice. Define colors / fonts / spacing / breakpoints / shadows / animations in CSS with `@theme`, and implement theme extensions with `@utility` / `@custom-variant` / `@plugin` / `@layer`.
Component Patterns
Systematically implement reusable UI components (button / card / form / nav / alert / badge / tooltip / modal) with Tailwind CSS. It also organizes accessibility (ARIA attributes), so you learn production-quality patterns.
Practical Project
A practical chapter that integrates the Tailwind CSS v4 knowledge you have learned to build a SaaS landing page. You implement all of the hero / features / pricing / FAQ / CTA / footer sections, and also set up custom animations with @theme + @keyframes.