Unknown word "use strict" error by upgrading TailwindCSS from v3 to v4

Question

I was running Tailwind 3.4.17 in my Vite React app, but I wanted to upgrade it, so I ran 'npx @tailwindcss/upgrade' following this guide and expecting an easy migration.

I now get this error from the Vite server when trying to run the app:

10:15:37 PM [vite] Internal server error: [postcss] postcss-import: /Users/oliver/Documents/code/news-planner/client/node_modules/tailwindcss/lib/index.js:1:1: Unknown word "use strict"
  Plugin: vite:css
  File: /Users/oliver/Documents/code/news-planner/client/node_modules/tailwindcss/lib/index.js:1:0
  1  |  "use strict";
     |  ^
  2  |  module.exports = require("./plugin");
  3  |  
      at Input.error (/Users/oliver/Documents/code/news-planner/client/node_modules/postcss/lib/input.js:113:16)
      at Parser.unknownWord (/Users/oliver/Documents/code/news-planner/client/node_modules/postcss/lib/parser.js:595:22)
      at Parser.other (/Users/oliver/Documents/code/news-planner/client/node_modules/postcss/lib/parser.js:437:12)
      at Parser.parse (/Users/oliver/Documents/code/news-planner/client/node_modules/postcss/lib/parser.js:472:16)
      at parse (/Users/oliver/Documents/code/news-planner/client/node_modules/postcss/lib/parse.js:11:12)
      at get root [as root] (/Users/oliver/Documents/code/news-planner/client/node_modules/postcss/lib/no-work-result.js:43:14)
      at Result.get [as root] (/Users/oliver/Documents/code/news-planner/client/node_modules/postcss/lib/no-work-result.js:77:21)
      at loadImportContent (file:///Users/oliver/Documents/code/news-planner/client/node_modules/vite/dist/node/chunks/dep-BGGf7Pd3.js:696:33)
      at async Promise.all (index 0)
      at async resolveImportId (file:///Users/oliver/Documents/code/news-planner/client/node_modules/vite/dist/node/chunks/dep-BGGf7Pd3.js:629:27)
      at async parseStyles$1 (file:///Users/oliver/Documents/code/news-planner/client/node_modules/vite/dist/node/chunks/dep-BGGf7Pd3.js:537:5)
      at async Object.Once (file:///Users/oliver/Documents/code/news-planner/client/node_modules/vite/dist/node/chunks/dep-BGGf7Pd3.js:794:22)
      at async LazyResult.runAsync (/Users/oliver/Documents/code/news-planner/client/node_modules/postcss/lib/lazy-result.js:293:11)
      at async compileCSS (file:///Users/oliver/Documents/code/news-planner/client/node_modules/vite/dist/node/chunks/dep-0AosnpPU.js:48587:21)
      at async TransformPluginContext.transform (file:///Users/oliver/Documents/code/news-planner/client/node_modules/vite/dist/node/chunks/dep-0AosnpPU.js:47842:11)
      at async EnvironmentPluginContainer.transform (file:///Users/oliver/Documents/code/news-planner/client/node_modules/vite/dist/node/chunks/dep-0AosnpPU.js:47219:18)
      at async loadAndTransform (file:///Users/oliver/Documents/code/news-planner/client/node_modules/vite/dist/node/chunks/dep-0AosnpPU.js:41030:27)
      at async viteTransformMiddleware (file:///Users/oliver/Documents/code/news-planner/client/node_modules/vite/dist/node/chunks/dep-0AosnpPU.js:42474:24)

I committed and pushed the project to GitHub right before running the upgrade. I would like to know how to get my app working again.

I tried running git checkout to the latest commit, uninstalling the new version of Tailwind and reinstalling the old. I still get the same error.

I'm running macOS 15.1

Answer 1

The issue is that you're trying to mix a v3 installation with v4, which is the wrong approach. Reviewing the TailwindCSS v4 installation, they have separated the required packages for PostCSS and CLI: @tailwindcss/postcss and @tailwindcss/cli.

• How to use TailwindCSS v4 & Vite without PostCSS
• Separated PostCSS plugin for TailwindCSS

The first step is to remove the unnecessary packages - which I don't fully know since you are not mentioned in the question -:

npm uninstall postcss-import autoprefixer

PostCSS

Even if you want to integrate TailwindCSS with PostCSS at this point, you only need tailwindcss, postcss, and @tailwindcss/postcss, like this:

npm install tailwindcss @tailwindcss/postcss postcss

postcss.config.mjs

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  }
}

• Install TailwindCSS v4 with PostCSS

Vite

However, starting from v4, Tailwind can be integrated directly into Vite (without PostCSS) using the @tailwindcss/vite Vite plugin:

npm install tailwindcss @tailwindcss/vite

vite.config.js

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

• Install TailwindCSS v4 with Vite

What's changed from v4?

Starting from v4, a minimum of Node.js v20 is required. The init process has been removed. The use of tailwind.config.js has been deprecated; instead, a CSS-first configuration has been introduced. The @tailwind directive is no longer used; instead, you should use @import "tailwindcss";.

• Removed @tailwind directives - StackOverflow
• Problem installing with "npx tailwindcss init -p" command - StackOverflow
• New CSS-first configuration option in v4 - StackOverflow
• TailwindCSS v4 is backwards compatible with v3 - StackOverflow

Further breaking changes:

• Upgrading your Tailwind CSS projects from v3 to v4 - TailwindCSS v4 Docs
• Automatic Source Detection from TailwindCSS v4 - StackOverflow
• Deprecated: Sass, Less and Stylus preprocessors support - StackOverflow