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:

@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.