Tailwind v4 classes not applying after migration

What causes this

Tailwind CSS v4 is a major rewrite with significant changes to how configuration works. The old tailwind.config.js + @tailwind directives approach is replaced with a CSS-first configuration system. If you upgraded without following the migration steps, your classes won’t apply.

Key changes in v4:

• No more @tailwind base/components/utilities directives
• Configuration moves from tailwind.config.js to CSS @theme blocks
• PostCSS plugin setup changed
• Some utility class names were renamed or removed
• Content detection is automatic (no more content array in config)

Fix 1: Update your CSS import

/* ❌ Old v3 way */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* ✅ v4 way — single import */
@import "tailwindcss";

Fix 2: Move config to CSS

/* ❌ Old: tailwind.config.js */
/* module.exports = { theme: { extend: { colors: { primary: '#3b82f6' } } } } */

/* ✅ New: in your CSS file */
@import "tailwindcss";

@theme {
  --color-primary: #3b82f6;
  --font-sans: "Inter", sans-serif;
  --breakpoint-3xl: 1920px;
}

Fix 3: Update PostCSS config

// ❌ Old postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

// ✅ v4 — Tailwind includes autoprefixer
module.exports = {
  plugins: {
    '@tailwindcss/postcss': {},
  },
};

Fix 4: Check for renamed utilities

Some classes changed in v4:

<!-- ❌ Renamed or removed -->
<div class="decoration-clone">  <!-- Now: box-decoration-clone -->
<div class="flex-grow">         <!-- Now: grow -->
<div class="flex-shrink">       <!-- Now: shrink -->

<!-- ✅ Updated names -->
<div class="box-decoration-clone">
<div class="grow">
<div class="shrink">

Fix 5: Remove the content config

v4 auto-detects your template files — no more content array:

// ❌ No longer needed in v4
module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
};

// ✅ v4 detects content automatically
// Just delete tailwind.config.js if you don't need custom config

How to prevent it

• Read the official v4 migration guide before upgrading
• Use npx @tailwindcss/upgrade to automate most of the migration
• Test in a branch first — the changes are significant
• Check our Tailwind CSS cheat sheet for the latest class reference