Tailwind Cheat Sheet
|
This section documents Tailwind CSS v4.x — the CSS-first configuration line, whose v4.0 release shipped in January 2025 — as published at the official Tailwind CSS documentation, which is the reference these pages are written and verified against. No specific patch version is pinned. This content was generated with the assistance of AI and should be verified against the official documentation before being relied on in production, since Tailwind iterates quickly. This section’s bibliography lists the reference material consulted while preparing these pages. |
A single-page, colour-coded summary of the Tailwind CSS v4 essentials — the install commands and the
one-line @import "tailwindcss" stylesheet, the anatomy of a utility class, the variant families
(state, structural, pseudo-element, group/peer, has-/not-, attribute, media), the mobile-first
breakpoints and container queries, the most-used utilities for layout, spacing, typography, colour, effects
and transforms, the CSS-first customization directives (@theme, @utility, @custom-variant, @apply,
@source), dark mode, and a v3-to-v4 rename table — handy for quick memorization or as a printable desk
reference.
For the full explanation, every option, and additional examples, see the dedicated pages:
Getting started and core concepts — Getting Started with Tailwind CSS, Utility-First Fundamentals, Hover, Focus, and Other States, Responsive Design, Dark Mode, and Theme Variables and Colors.
Base styles — Preflight and Base Styles.
Utility families — Layout, Flexbox and Grid, Spacing and Sizing, Typography, Backgrounds, Borders, and Effects, Filters, Transitions, and Transforms, and Interactivity, SVG, and Accessibility.
Customization — Customization and Configuration and Custom Styles and Arbitrary Values.
Build and upgrade — Build and Production, Upgrading from v3 to v4, and Building a Page with Utilities.