Tailwind CSS v4: A Silent Revolution

If you've been using Tailwind CSS for years, the jump to version 4 might seem overwhelming at first. We've lost our beloved tailwind.config.js in favor of a purely CSS-based configuration. However, this change is one of the best architectural decisions the Tailwind team has made.

Everything is CSS (@theme Directives)

The main new feature of Tailwind v4 is that all configuration now resides in your global CSS file using the @theme directive.

@import "tailwindcss";

@theme {
  --color-brand-acid: #ccff00;
  --font-heading: "Courbe Sans", sans-serif;
  --shadow-brutal: 8px 8px 0px #000;
}

This eliminates the friction between JavaScript files and your stylesheets. Now, your design tokens live where they belong: in the CSS.

Renamed and Optimized Classes

For those of us creating UI component libraries, it is vital to know the changes in nomenclature. Some of the most used classes have been optimized:

• flex-grow is now simply grow.
• flex-shrink-0 has become shrink-0.
• Default shadows have been scaled (shadow is now shadow-sm).
• The infamous outline-none (which often caused accessibility issues) has been replaced by outline-hidden.

Dynamic CSS Variables in Utilities

At The UI Factory we use arbitrary values extensively. Tailwind v4 handles this natively and injects CSS variables on the fly without bloating the production bundle.

// Example of button with dynamically injected colors
<button className="bg-[var(--color-brand-acid)] text-black border-4 border-black">
  Hover Me
</button>

This update allows us to build Ink & Acid interfaces much more semantically and cleanly. In future articles we will delve into how to combine these utilities with the physical power of Framer Motion.