A Tailwind CSS Cheatsheet That Cuts Through the Noise
Tailwind's utility-class surface is large enough that a condensed lookup table saves real time during layout work. The v3-to-v4 migration notes are immediately useful for anyone upgrading a project and hitting changed shadow scales or the new opacity syntax.
Layout patterns boil down to three Flex and Grid combinations: centering, space-between, and equal-width columns. Spacing maps directly to a 4px scale, with `p-4` for 16px and `w-1/2` for 50% width. Text sizing, color opacity, border radius, and responsive breakpoints follow a mobile-first syntax where `lg:` targets laptops and the default state handles phones.
Version 4 syntax changes get a dedicated comparison table. Opacity moves from `bg-opacity-50` to a slash shorthand like `bg-black/50`, shadow scales shift down one level, and custom colors move from JS config into CSS `@theme` blocks. The import line collapses three directives into a single `@import "tailwindcss"`.
An escape hatch section covers arbitrary values in square brackets, and the whole thing ends with a rhyming mnemonic that encodes the core workflow: flex parents, mobile-first breakpoints, slash opacity, and bracket overrides.
The v4 opacity shorthand is a genuine ergonomic win that eliminates a long-standing class-bloat pattern.
Shadow scale renaming in v4 is a breaking change that will silently alter visual hierarchy on upgrade unless caught.
Moving theme tokens from JS config to CSS `@theme` aligns Tailwind more closely with native CSS custom properties and reduces framework-specific config knowledge.