Tailwind CSS v4 replaces JavaScript configuration files with a modern CSS-native theme architecture.
🎨 What Changed?
Direct @theme directives replace traditional tailwind.config.js files.
Build speeds are up to 10x faster thanks to the Rust-based LightningCSS engine.
Dynamic color palettes and glassmorphism styling can now be written using pure CSS variables.``
css
@theme {
--color-brand-primary: #8b5cf6;
--color-brand-secondary: #06b6d4;
--font-mono: "Fira Code", monospace;
}
``
⚡ Performance Wins:
Stylesheet footprints are up to 40% smaller with zero runtime JS overhead.
