---
title: 'Migrating Large Codebases to Tailwind CSS v4'
description: 'Hands-on experience and gotchas when upgrading complex design systems to Tailwind CSS v4.'
subtitle: 'CSS-first configuration and lightning-fast oxide engine.'
date: '2026-04-18'
lang: 'en'
---

Tailwind CSS v4 is a ground-up rewrite that redefines how utility-first CSS is authored and compiled.

## What is New in v4?

Gone is the JavaScript-based `tailwind.config.js`. Everything is now configured natively within CSS:

```css
@import 'tailwindcss';

@theme {
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --color-brand-primary: #3b82f6;
}

@utility custom-badge {
  @apply inline-flex items-center px-2 py-0.5 rounded text-xs font-medium;
}
```

### Key Benefits

- **Zero JS config**: Native CSS `@theme` directives make token sharing intuitive.
- **Lightning Compilation**: The Oxide engine builds stylesheet variations in single-digit milliseconds.
- **Container Queries Built-in**: Full support for container queries without separate plugins.