Ctrl+Z Therapy
CasesQuick answersGuides10-minute checklistHow we testCartoonSend it in

Tailwind classes not working? Your AI wrote a v3 setup for Tailwind v4

Ship ItChecked against the official source

Source checked 8 Nov 2026 · Published 9 Nov 2026 · Last reviewed 9 Nov 2026 · By Ctrl+Z Therapy (how we test)

The short answer

Tailwind's upgrade guide: in v4 you import Tailwind using a regular CSS @import statement (@import "tailwindcss";), not using the @tailwind directives you used in v3. JavaScript config files are no longer detected automatically in v4, and the PostCSS plugin now lives in a dedicated @tailwindcss/postcss package. A v3 setup on v4 can leave your classes doing nothing.

What to do

  1. Run Tailwind's upgrade tool: npx @tailwindcss/upgrade. It updates dependencies, migrates the config to CSS and handles template changes.
  2. Or fix it by hand: replace the @tailwind lines with @import "tailwindcss";, load a JavaScript config with @config if you still need one, and switch the PostCSS plugin to @tailwindcss/postcss.

Good to know

  • Tailwind CSS v4.0 is designed for Safari 16.4+, Chrome 111+, and Firefox 128+. For older browsers, stay on v3.4.
  • In v4, imports and vendor prefixing are handled automatically, so postcss-import and autoprefixer can be removed.

Source

Checked on 8 Nov 2026. Prices, limits and settings change, so check the source before you rely on them.

Related