This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # Tailwind CSS v4 | |
| > Tailwind CSS v4 is a utility-first CSS framework that scans source files for complete class name strings and generates only the CSS that is actually used, with zero runtime overhead. Version 4 is a full rewrite: JavaScript config files are replaced by CSS-native `@theme` blocks, all colors move to the OKLCH color space, Lightning CSS handles transforms and browser prefixes automatically, and the entry point changes from three `@tailwind` directives to a single `@import "tailwindcss"`. The recommended integration is a dedicated Vite plugin (`@tailwindcss/vite`). Minimum browser support: Chrome 111, Safari 16.4, Firefox 128. An automated upgrade tool (`npx @tailwindcss/upgrade`) handles roughly 90% of the v3-to-v4 migration. | |
| **Breaking changes LLMs frequently get wrong when generating v4 code:** | |
| - Shadow, blur, rounded, and ring size names shifted one step down — `shadow` → `shadow-sm`, `shadow-sm` → `shadow-xs`, `rounded` → `rounded-sm`, `blur` → `blur-sm`, etc. | |
| - The `!important` modifi |
OlderNewer