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

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.