Mastering Tailwind CSS v4

What’s New in Tailwind v4

Tailwind CSS v4 brings significant performance improvements and new features that make building interfaces even more enjoyable.

The New CSS-First Approach

Tailwind v4 introduces a CSS-first configuration approach:

@import "tailwindcss";

@theme {
  --color-primary: #3b82f6;
  --font-sans: 'Inter', sans-serif;
}

Key Features

Native CSS Variables

Theme values are now exposed as CSS custom properties, making it easier to integrate with other tools and access values in JavaScript.

Improved Performance

The new engine is significantly faster, with build times reduced by up to 10x in some cases.

Container Queries

Built-in support for container queries allows truly component-driven responsive design:

<div class="@container">
  <div class="@md:flex @md:gap-4">
    <!-- Responds to container size, not viewport -->
  </div>
</div>

Best Practices

1. Use semantic class names - Group utilities logically
2. Extract components - Don’t repeat yourself
3. Leverage the theme - Stay consistent with your design tokens
4. Mobile-first - Always start with the base styles