Tailwind CSS v4: What's New for Production Apps

Tailwind CSS v4 landed with significant architectural changes that affect how you build production apps. If you're upgrading an existing project or starting fresh, here's what actually changed and what it means for your workflow.

The Biggest Change: CSS-First Configuration

Tailwind v4 moves configuration out of tailwind.config.js and into CSS. You define your theme, custom colors, fonts, and breakpoints directly in your CSS file using @theme. No more separate JavaScript config file for most use cases.

This means your design tokens live alongside your styles. It's a cleaner mental model — your CSS file is the single source of truth for your design system. It also makes Tailwind work better in environments where a JavaScript build step is inconvenient.

Faster Builds with the New Engine

Tailwind v4 ships with a completely rewritten engine (Oxide, written in Rust and Lightning CSS). Build times on large projects drop by 80–90%. A project that took 3 seconds to compile in v3 compiles in under 300ms in v4.

Incremental builds in watch mode are essentially instant. For development, this is a meaningful quality-of-life improvement — you see style changes in the browser as fast as you can save the file.

What Changed in the Class API

Most v3 utility classes still work, but there are some breaking changes. The ring utility now uses the outline property internally. Gradient utilities have been reworked. Some variant syntax changed.

The @apply directive still works but is no longer the recommended pattern for component styles. Tailwind v4 encourages inline utilities or CSS cascade layers (@layer components) instead.

Upgrading an Existing Project

Tailwind ships an upgrade codemod: npx @tailwindcss/upgrade. It handles most of the mechanical changes automatically — config migration, deprecated class renames, and import restructuring. Run it on a clean git branch, review the diff, and test thoroughly.

For projects using Filament or other Laravel UI packages, check compatibility before upgrading. Package authors are updating for v4 compatibility but timelines vary. Pin Tailwind to v3 until your dependencies are ready if you're using a Filament-heavy stack.

Our Recommendation for New Projects

Start new projects on Tailwind v4. The faster builds and CSS-first config are genuine improvements. For existing projects, upgrade when your main UI dependencies have confirmed v4 support. The upgrade codemod makes the migration straightforward once you're ready.