Tailwind CSS 4.0 in 2026: Complete Guide to the New Features and Migration

# Install Tailwind CSS 4.0
npm install tailwindcss@latest

# For Vite projects
npm install @tailwindcss/vite

# For PostCSS
npm install @tailwindcss/postcss

/* app.css - The new way to import Tailwind */
@import "tailwindcss";

/* That's it! No @tailwind directives needed */

/* Customizing with CSS variables */
@theme {
  --color-primary: #3b82f6;
  --color-secondary: #8b5cf6;
  --font-display: "Inter", sans-serif;
  --breakpoint-3xl: 1920px;
  
  /* Custom spacing scale */
  --spacing-128: 32rem;
  --spacing-144: 36rem;
}

/* Adding custom utilities */
@utility text-gradient {
  background: linear-gradient(to right, var(--color-primary), var(--color-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<!-- Container query example -->
<div class="@container">
  <div class="flex flex-col @md:flex-row @lg:gap-8">
    <img class="w-full @md:w-1/3" src="/product.jpg" alt="Product" />
    <div class="@md:flex-1">
      <h2 class="text-lg @lg:text-2xl font-bold">Product Title</h2>
      <p class="text-sm @md:text-base text-gray-600">
        Product description that responds to container size.
      </p>
      <div class="hidden @lg:flex gap-4 mt-4">
        <button class="btn-primary">Buy Now</button>
        <button class="btn-secondary">Add to Cart</button>
      </div>
    </div>
  </div>
</div>

<!-- Named containers -->
<div class="@container/card">
  <div class="@lg/card:grid @lg/card:grid-cols-2">
    <!-- Content adapts to the card container size -->
  </div>
</div>

<!-- New variants in Tailwind 4.0 -->

<!-- :has() variant -->
<div class="has-[input:focus]:ring-2 has-[input:focus]:ring-blue-500">
  <input type="text" class="border rounded px-4 py-2" />
</div>

<!-- Group variants with :has() -->
<div class="group">
  <input type="checkbox" class="peer" />
  <div class="group-has-[input:checked]:bg-green-100">
    Checked state styling
  </div>
</div>

<!-- :not() variant -->
<button class="not-disabled:hover:bg-blue-600 disabled:opacity-50">
  Submit
</button>

<!-- Starting style (for animations) -->
<div class="starting:opacity-0 starting:scale-95 transition-all">
  Animates in on mount
</div>

<!-- Inert variant -->
<div class="inert:opacity-50 inert:pointer-events-none">
  Content that can be disabled
</div>

<!-- 3D transform utilities -->
<div class="perspective-1000">
  <div class="
    transform-style-3d
    rotate-y-12
    hover:rotate-y-0
    transition-transform
    duration-500
  ">
    <div class="backface-hidden">
      Front of card
    </div>
    <div class="backface-hidden rotate-y-180 absolute inset-0">
      Back of card
    </div>
  </div>
</div>

<!-- Z-axis transforms -->
<div class="translate-z-10 hover:translate-z-20 transition-transform">
  Card that moves towards viewer on hover
</div>

// Before: tailwind.config.js
- module.exports = {
-   content: ['./src/**/*.{js,ts,jsx,tsx}'],
-   theme: {
-     extend: {
-       colors: {
-         primary: '#3b82f6',
-       },
-     },
-   },
- }

// After: app.css (no config file needed)
+ @import "tailwindcss";
+ 
+ @theme {
+   --color-primary: #3b82f6;
+ }

// CSS changes
- @tailwind base;
- @tailwind components;
- @tailwind utilities;
+ @import "tailwindcss";

// Class name changes
- bg-opacity-50
+ bg-black/50

- text-opacity-75
+ text-black/75

- ring-offset-2
+ ring-offset-2 (unchanged)

// Shadow color
- shadow-lg shadow-blue-500/50
+ shadow-lg shadow-blue-500/50 (unchanged)