Tailwind CSS Framework Cheat Sheet

Updated 2026-04-28

Next Topic: TanStack Libraries for Web Development Cheat Sheet

Tailwind CSS is a utility-first CSS framework that enables rapid UI development by composing small, single-purpose classes directly in markup. Unlike traditional CSS frameworks that provide pre-built components, Tailwind gives you low-level utility classes as building blocks—making it infinitely customizable while keeping your CSS lean and maintainable. With v4's CSS-first configuration, Rust-powered Oxide engine, and JIT compilation, Tailwind generates only the styles you use, delivers build times measured in microseconds, and requires nothing but @import "tailwindcss" to get started. What sets Tailwind apart is its mobile-first responsive design system, state-variant modifiers (hover:, focus:, dark:), and deep integration with the modern CSS platform (cascade layers, color-mix(), @property, oklch colors)—letting you handle complex interactions without ever writing custom CSS.

What This Cheat Sheet Covers

This topic spans 28 focused tables and 264 indexed concepts. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.

Table 1: Core ConceptsTable 2: Setup and ConfigurationTable 3: Layout UtilitiesTable 4: Flexbox UtilitiesTable 5: Grid UtilitiesTable 6: Spacing UtilitiesTable 7: Sizing UtilitiesTable 8: Typography UtilitiesTable 9: Color UtilitiesTable 10: Background UtilitiesTable 11: Border UtilitiesTable 12: Effects and FiltersTable 13: Masking UtilitiesTable 14: Transforms and TransitionsTable 15: 3D Transform UtilitiesTable 16: Interactivity UtilitiesTable 17: Responsive DesignTable 18: State VariantsTable 19: Dark ModeTable 20: Arbitrary Values and PropertiesTable 21: Component PatternsTable 22: Accessibility UtilitiesTable 23: Advanced LayoutTable 24: Logical PropertiesTable 25: Tables and ListsTable 26: SVG UtilitiesTable 27: PluginsTable 28: Performance and Production

Table 1: Core Concepts

The mental model that makes everything else click — utilities you compose in markup, breakpoint and state prefixes you stack on them, and the v4 engine that compiles only what you actually use. Get these few ideas and the hundreds of class names that follow stop feeling like memorization.

Concept	Example	Description
Utility-first approach	`<div class="bg-blue-500 text-white p-4">`	Compose styles using small, single-purpose classes directly in markup instead of writing custom CSS — every class does one thing.
Responsive design	`<div class="text-sm md:text-lg">`	Apply styles conditionally at breakpoints using prefixes (`sm:`, `md:`, `lg:`, `xl:`, `2xl:`) — mobile-first by default.
State variants	`<button class="hover:bg-blue-700">`	Target interactive states with prefixes like `hover:`, `focus:`, `active:`, `disabled:` — works on any utility class.
Dark mode	`<div class="bg-white dark:bg-gray-900">`	Toggle styles for dark themes using `dark:` variant — supports class-based or media query strategies.
CSS-first configuration	`@import "tailwindcss";` `@theme { --color-brand: #3b82f6; }`	In v4, all customization lives in your CSS file — no `tailwind.config.js` required. `@import "tailwindcss"` replaces all `@tailwind` directives.
JIT engine	Full build in ~100ms; incremental in ~192µs	On-demand compilation of only the styles you use — enables all variants on all utilities, produces tiny CSS bundles.

Table 1: Core Concepts

Concept	Example	Description
Utility-first approach	`<div class="bg-blue-500 text-white p-4">`	Compose styles using small, single-purpose classes directly in markup instead of writing custom CSS — every class does one thing.
Responsive design	`<div class="text-sm md:text-lg">`	Apply styles conditionally at breakpoints using prefixes (`sm:`, `md:`, `lg:`, `xl:`, `2xl:`) — mobile-first by default.
State variants	`<button class="hover:bg-blue-700">`	Target interactive states with prefixes like `hover:`, `focus:`, `active:`, `disabled:` — works on any utility class.
Dark mode	`<div class="bg-white dark:bg-gray-900">`	Toggle styles for dark themes using `dark:` variant — supports class-based or media query strategies.
CSS-first configuration	`@import "tailwindcss";` `@theme { --color-brand: #3b82f6; }`	In v4, all customization lives in your CSS file — no `tailwind.config.js` required. `@import "tailwindcss"` replaces all `@tailwind` directives.
JIT engine	Full build in ~100ms; incremental in ~192µs	On-demand compilation of only the styles you use — enables all variants on all utilities, produces tiny CSS bundles.