What's New in Tailwind CSS v4
A new engine up to 182x faster, CSS-first configuration with @theme, and modern features like container queries and 3D transforms — all with zero extra plugins.
What's New in Tailwind CSS v4
Tailwind v4 isn't an incremental update — it's a ground-up rewrite. The new engine (codenamed Oxide) posts serious numbers: full builds are 3.78x faster (378ms → 100ms), and incremental rebuilds that don't need new CSS are up to 182x faster, landing in the microsecond range.
CSS-First Configuration
The biggest conceptual shift is moving configuration out of tailwind.config.js and into a @theme block right inside your CSS:
@import "tailwindcss";
@theme {
--font-display: "Satoshi", sans-serif;
--breakpoint-3xl: 1920px;
--color-avocado-500: oklch(0.84 0.18 117.33);
}
Everything you define inside @theme automatically becomes a real CSS variable usable anywhere in the project — this is exactly how this site's own colors and shadows (--color-neon-violet, --shadow-glow-violet) are defined.
Simpler Installation
- A single import —
@import "tailwindcss"— no more separate@tailwinddirectives - Automatic content detection, no manual config needed, and it respects
.gitignore - Built-in vendor prefixing via Lightning CSS
Notable New Capabilities
- Container queries, built in with no plugin:
@container,@sm: - 3D transforms:
rotate-x-*,rotate-y-*,scale-z-*,translate-z-* - Dynamic utilities — values like
grid-cols-15just work without being predefined in config, the same mechanism that lets classes likew-104oraspect-2752/1536work in this project with zero extra setup - Richer gradients — conic/radial gradients, interpolation modes, explicit angles
@starting-stylefor enter/exit transitions without JavaScript- The
not-*variant for negating a selector or media query
Logical Properties for RTL
Tailwind v4 leans heavily on logical properties, which makes right-to-left support far simpler. For a bilingual site like this one — Persian (RTL) and English (LTR) — that means using inset-s-*/inset-e-* instead of physical left/right, with no separate conditional classes per language.
Colors Move to OKLCH
The default color palette moved from rgb to oklch, unlocking a wider, more vivid color gamut on modern displays while keeping visual balance close enough to v3 that upgrading doesn't require a full redesign.
Takeaway
Tailwind v4 is faster, its configuration lives closer to plain CSS, and it ships modern CSS features like container queries and 3D transforms out of the box. For any project mixing RTL and LTR layouts, the expanded logical-properties support alone is a solid reason to upgrade.
