Tailwind CSS v4 Alpha - Lightning Fast with New Features

Tailwind CSS v4 alpha is here, and it's a complete rewrite that's 10x faster than v3. Here's what's new.

New Rust-Based Engine

The new engine written in Rust provides:

• 10x faster build times
• 100x faster incremental builds
• Near-instant HMR updates

Zero Configuration

No more tailwind.config.js required! Customize using CSS variables:

@theme {
  --color-primary: #3b82f6;
  --font-sans: 'Inter', system-ui;
  --breakpoint-tablet: 768px;
}

New Features

Composable Variants

@variant hocus (&:hover, &:focus);
@variant can-hover (@media (hover: hover));

Native CSS Cascade Layers

<div class="layer-base:bg-white layer-components:bg-blue-500">
  Automatic layer management
</div>

Container Queries

<div class="@container">
  <div class="@lg:grid-cols-2">Responsive to container, not viewport!</div>
</div>

Migration Path

Migrating from v3 is straightforward:

1. Update dependencies
2. Remove config file (or keep for custom values)
3. Test and optimize

The performance gains alone make v4 worth the upgrade.