reactjs - I am trying to use vite with tailwind and I keep getting this error - Stack Overflow

admin管理员组

文章数量:1405393

I have been trying to install vite with tailwindcss, but I keep getting this error:

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

I used chatgpt to include some files that were missing but it's still throwing that error

I have been trying to install vite with tailwindcss, but I keep getting this error:

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

I used chatgpt to include some files that were missing but it's still throwing that error

• reactjs
• tailwind-css
• vite
• postcss
• tailwind-css-4

Share Improve this question Follow edited Mar 23 at 7:23 marc_s 756k184184 gold badges1.4k1.4k silver badges1.5k1.5k bronze badges asked Mar 22 at 15:04 user30024141user30024141 1 5

• Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. Questions without a clear problem statement are not useful to other readers. See: How to create a Minimal, Complete, and Verifiable example. – Wongjn Commented Mar 22 at 21:50
• This question is similar to: Loading PostCSS Plugin failed: Cannot find module 'tailwindcss' error when I run using vite. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. – rozsazoltan Commented Mar 22 at 23:26
• And possible similar to: Whenever I run my React-Vite it says [plugin:vite:esbuild] The service is no longer running – rozsazoltan Commented Mar 22 at 23:27
• And since the question contains little information, this is also relevant (in fact, everything related to v4 breaking changes): How to fix Tailwind PostCSS plugin error? – rozsazoltan Commented Mar 22 at 23:29
• [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. <-- it's a typically new TailwindCSS v4 warning message. Use @tailwindcss/postcss instead of tailwindcss. – rozsazoltan Commented Mar 22 at 23:30

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

Just follow the official documentation here.

Also verify these files:

1. After installing tailwindcss make sure your vite.config.js looks like this.

import {
  defineConfig
} from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'


// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
})

2. Update your index.css located in src/ dir (your-vite-app/src/index.css) Make sure you have written this line at the top:

@import "tailwindcss";

3. Then all set, just restart the webapp, (npm run dev)

Although you haven't shared much information, this error message occurs when you follow an old v3 installation guide but install Tailwind CSS with npm install tailwindcss, which has been installing v4 since January 2025.

• Loading PostCSS Plugin failed: Cannot find module 'tailwindcss' error when I run using vite

v4 introduces many breaking changes and a new installation method.

If you want to install v3, use:

npm install tailwindcss@3

If you want v4, follow:

• Solution #1: TailwindCSS v4 & Vite without PostCSS - StackOverflow
• Solution #2: PostCSS & Vite with TailwindCSS v4 - StackOverflow

Related:

• What changes from TailwindCSS v4? - StackOverflow

本文标签： reactjsI am trying to use vite with tailwind and I keep getting this errorStack Overflow