What is Tailwind CSS v4?
Tailwind CSS v4 is a ground-up rewrite of the utility-first CSS framework. While v3 relied on a JavaScript configuration file and PostCSS pipeline, v4 introduces a CSS-first configuration model that feels more native and requires zero JavaScript config for most projects.
CSS-First Configuration
The most visible change is the elimination of tailwind.config.js for most use cases. Instead, you configure Tailwind directly in your CSS file using the @theme directive. You define custom colors, fonts, breakpoints, and other design tokens as CSS custom properties. These theme variables automatically generate corresponding utility classes.
For example, defining --color-brand-500 in your @theme block automatically generates bg-brand-500, text-brand-600, border-brand-500, and all related utilities. No JavaScript configuration required.
10x Faster Build Times
Tailwind v4 was rebuilt with a new high-performance engine written in Rust via Lightning CSS. The performance improvements are dramatic: full builds take around 35ms (down from 300ms), incremental builds take around 2ms, and no purging configuration is needed — the framework automatically detects which classes are used.
New Features in v4
Wide Gamut Colors: v4 ships with P3 color support out of the box, enabling more vibrant colors on modern displays using the oklch color space.
Container Queries: Native container query support is included without plugins. Use the @container class on a parent and then apply responsive styles based on the container's width rather than the viewport.
3D Transforms: New 3D transform utilities let you create depth effects with perspective, rotate-x, translate-z, and related utilities.
Dark Mode Configuration
In v4, class-based dark mode is configured via a CSS custom variant directive. This tells Tailwind to apply dark mode styles when a .dark class is present on any ancestor element — perfect for use with next-themes. You add @custom-variant dark (&:where(.dark, .dark *)) to your CSS file to enable this behavior.
Migration from v3
Most v3 projects need minimal changes: update tailwindcss to v4, replace tailwind.config.js with CSS theme configuration, update PostCSS config to use @tailwindcss/postcss, and replace deprecated utilities like bg-opacity-* with the modern bg-*/opacity syntax.
Conclusion
Tailwind CSS v4 is a bold, well-executed leap forward. The CSS-first approach reduces tooling complexity while the Rust-powered engine makes development feel instant. It's the most significant upgrade to the framework since its initial release.