CODEWITHSUNDEEP
reactjstailwind-cssvitepostcsstailwind-css-4
amos murmu
amos murmu

Reputation: 93

Cannot build frontend using Vite, TailwindCSS with PostCSS

10:04:32 PM [vite] Internal server error: [postcss] It looks like you're trying to use tailwindcss directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install @tailwindcss/postcss > and update your PostCSS configuration. Plugin: vite:css File: ...

10:04:32 PM [vite] Internal server error: [postcss] Missing > "./components" specifier in "tailwindcss" package Plugin: vite:css File: ...

I developed my chat app so I wanted everything updated so I removed node_modules then npm install and build then the above error keeps coming. It has to be something related to dependencies because it was working before I remove node_modules.

npm cache clean --force

npm install -D tailwindcss autoprefixer postcss

I uninstalled them and did the above commands but it keeps giving me above error. What is the relation of PostCSS to TailwindCSS why are both dependent on each other?

npx tailwindcss init

also it says

npm error could not determine executable to run npm error A complete log of this run can be found in: /home/amosmurmu/.npm/_logs/2025-01-23T15_39_50_870Z-debug-0.log

I also tried to change Node.js version using NVM but it gives structured clone error so its not Node.js or NPX or NPM.

Upvotes: 9

Views: 15763

Answers (2)

rozsazoltan
rozsazoltan

Reputation: 9073

TailwindCSS v3

The installation of TailwindCSS v3 and v4 is different. You were expecting the v3 installation, but v4 is the new latest version. For v3 installation, use:

npm install -D tailwindcss@3

Once this is done, the other steps remain unchanged:

TailwindCSS v4

To install TailwindCSS v4, please refer to the updated installation and upgrade guides.

Some related question for v4 upgrade:

I see you're using v4. The use of tailwind.config.js has been removed, and instead, you can use a simple CSS-first configuration. However, it's possible to use the legacy JavaScript-based configuration via the @config directive.

Upvotes: 19

孙欣乐
孙欣乐

Reputation: 426

Delete the postcss.config.js file

And then npm i -d @tailwindcss/vite, and also change the vite.config.ts file

...
import tailwindcss from "@tailwindcss/vite";

export default defineConfig(async () => ({
  plugins: [
    react(),
    tailwindcss(),
  ],
...
...

Upvotes: 0

Related Questions