reactjs - Unknown word "use strict" error by upgrading TailwindCSS from v3 to v4 - Stack Overflow

admin管理员组

文章数量:1391794

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

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

• reactjs
• tailwind-css
• vite

Share Improve this question Follow edited Apr 2 at 7:03 rozsazoltan 11.3k66 gold badges2020 silver badges5959 bronze badges asked Mar 12 at 3:03 oliveroliver 1311 silver badge33 bronze badges 1

• 1 You can actually reset your git head and make it point to the previous commit. if you would like to get the app working again. then push the local changes to the remote repository. – Suman Parajuli Commented Mar 12 at 3:30

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

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

本文标签： reactjsUnknown word quotuse strictquot error by upgrading TailwindCSS from v3 to v4Stack Overflow