Skip to content

Tailwind CSS v4: Faster Builds and a CSS-First Approach

Tailwind CSS has become one of the most popular ways to style modern websites, and in January 2025 version 4.0 was released. It isn't just an incremental update. It's a ground-up rewrite that changes how projects are configured and takes full advantage of features now built into modern browsers.

A Much Faster Engine

Tailwind v4 introduces a new high-performance engine. Full builds are several times faster than v3, and incremental builds, where you change a file and the CSS updates, are dramatically faster still. In day-to-day development, style changes appear almost instantly, even on large projects.

Configuration Moves Into CSS

The most visible change is that you no longer need a tailwind.config.js file. Instead, you import Tailwind and customise it directly in your CSS:

@import 'tailwindcss';

@theme {
  --font-display: 'Inter', sans-serif;
  --color-brand-500: oklch(0.63 0.24 25);
  --breakpoint-3xl: 1920px;
}

Every value defined in @theme becomes both a utility class (such as font-display or bg-brand-500) and a regular CSS variable you can use anywhere. This makes it much easier to share design tokens between Tailwind and custom CSS.

Automatic Content Detection

In v3, you had to tell Tailwind exactly which files to scan for class names. v4 detects your template files automatically and ignores anything in your .gitignore, so there's one less thing to configure and one less thing to get wrong.

Built on Modern CSS

Tailwind v4 is designed for modern browsers and uses features that are now widely supported:

  • Cascade layers for more predictable style ordering.
  • Registered custom properties (@property), enabling smooth transitions on things like gradients.
  • color-mix() for adjusting colour opacity, including on CSS variables.
  • A wider-gamut colour palette defined in OKLCH, giving more vivid colours on modern displays.

New Features Worth Knowing

  • Container queries are built in. Use @container on a parent and @sm: or @lg: variants on children to style components based on their container's size, not the whole screen.
  • 3D transform utilities such as rotate-x-* and perspective-*.
  • starting: variant for animating elements as they first appear, using the CSS @starting-style rule.
  • not-* variant for styling elements when a condition doesn't apply.
  • First-party Vite plugin for the tightest integration and best performance.

Upgrading From v3

Tailwind provides an upgrade tool that handles most of the migration:

npx @tailwindcss/upgrade

A few things to check after upgrading:

  1. Browser support. v4 targets Safari 16.4+, Chrome 111+ and Firefox 128+. If you need to support older browsers, stay on v3 for now.
  2. Default border colour. Borders now use currentColor by default rather than a grey, so add explicit colours where needed.
  3. Renamed utilities. Some utilities have been renamed for consistency, such as shadow-sm becoming shadow-xs. The upgrade tool handles most of these.
  4. Plugins. Plugins like @tailwindcss/typography are now loaded with @plugin in your CSS.

Is It Worth Upgrading?

For new projects, absolutely. Tailwind v4 is faster, simpler to configure and makes better use of the browser. For existing sites, the upgrade is usually straightforward, but test thoroughly before going live, especially if the site needs to support older browsers.

Thinking about a fresh, modern build for your business? Find out more about my custom responsive web design service.