reactjstailwind-cssvite

I broke my app by upgrading Tailwind – how can I get it back?

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

Solution

  • 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.

    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": {},
  }
}

    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(),
  ],
})

    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";.

    Further breaking changes: