Tailwind CSS 4.0 Complete Guide

Tailwind CSS 4.0 introduces a new engine and improved performance.

New Features

Oxidized Engine

The new Rust-based engine provides:

• Faster build times (up to 10x faster)
• Improved IDE support
• Smaller output sizes

New Utility Classes

<div class="size-10 p-4 text-balance">
  <!-- size-10 = width + height -->
  <!-- text-balance for better typography -->
</div>

Container Queries

Built-in support for container queries:

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

Migration Guide

Update your configuration:

// tailwind.config.js
export default {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
}

Conclusion

Tailwind CSS 4.0 is a major upgrade that improves developer experience and performance.