Skip to content

Instantly share code, notes, and snippets.

View ArtMin96's full-sized avatar

Arthur Minasyan ArtMin96

  • Yerevan, Armenia
  • 09:21 (UTC +04:00)
  • X @ArtMin96
View GitHub Profile
# 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