Tailwind CSS v4: What's New and How to Optimize for Production
Tailwind CSS v4 introduces a new engine, CSS-first configuration, and zero-config purging. Here is what changed, what broke, and how to get the best performance in production Next.js apps.
By POINTNEXIS Team
Tailwind CSS v4 is a near-complete rewrite. The new Oxide engine (built on Lightning CSS) is dramatically faster, the configuration moved from `tailwind.config.js` to a CSS file, and the PostCSS plugin was replaced with a Vite plugin.
For teams upgrading from v3, the migration involves some breaking changes. For teams starting fresh, v4 simplifies the setup considerably. Here is what to know.
CSS-First Configuration
Tailwind v4 replaces `tailwind.config.js` with `@theme` directives inside your CSS file. Custom colors, spacing, fonts, and breakpoints are defined as CSS custom properties: `@theme { --color-brand: oklch(0.65 0.2 250); }`.
This approach makes the design system part of the CSS cascade rather than a build-time configuration. It enables dynamic theming with CSS variables natively and simplifies integration with design tools that export CSS variables.
Performance in Production Next.js Apps
Tailwind's purging (now called content detection) automatically removes unused classes in production. With v4, content detection is automatic — no `content` array needed. The generated CSS for most marketing sites is under 10KB after compression.
For large apps with dynamic class names, avoid string concatenation that creates classes at runtime. Use a `clsx` or `cva` pattern with complete class strings: `'bg-blue-500'` not `\`bg-${color}-500\``. The latter prevents static analysis from detecting the class.
Component Variants with cva
The `class-variance-authority` (CVA) library pairs naturally with Tailwind to create typed component APIs. Define a button variant system with `cva('base-classes', { variants: { intent: { primary: 'bg-blue-600', danger: 'bg-red-600' } } })` and TypeScript infers the allowed values.
This pattern gives you design-system-level consistency without CSS-in-JS runtime overhead. POINTNEXIS design systems use CVA throughout — it is the right abstraction layer between designers' component specifications and engineers' implementation.