Not one LLM was able to help me fix this issue, so here I am. I'm building a Vite + React + TS project and it fails to build because of this error: [plugin:vite:css] [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. The first one is a

I have tried:

• uninstalling tailwindcss/postcss
• reconfiguring the plugin array inside postcss from require('tailwindcss') to require('@tailwindcss/postcss')
• adding import @tailwindcss to my global css

My PostCSS file

  plugins: {
    '@tailwindcss/postcss': {},
    autoprefixer: {},
  },
}

My Vite file

import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

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

my index.css (snippet)

@tailwind base;
@tailwind components;
@tailwind utilities;


@layer base {
  html {

Appreciate any help

Not one LLM was able to help me fix this issue, so here I am. I'm building a Vite + React + TS project and it fails to build because of this error: [plugin:vite:css] [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. The first one is a

I have tried:

• uninstalling tailwindcss/postcss
• reconfiguring the plugin array inside postcss from require('tailwindcss') to require('@tailwindcss/postcss')
• adding import @tailwindcss to my global css

My PostCSS file

  plugins: {
    '@tailwindcss/postcss': {},
    autoprefixer: {},
  },
}

My Vite file

import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

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

my index.css (snippet)

@tailwind base;
@tailwind components;
@tailwind utilities;


@layer base {
  html {

Appreciate any help

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

• What's your TailwindCSS version? It looks like you're trying to install v4 based on v3 practices, using the new @tailwindcss/postcss and @tailwindcss/vite packages created for v4. These two packages can only be used with v4. In TailwindCSS v3, PostCSS support was still implemented directly, and Vite support didn’t even exist yet. Read more in my answer. – rozsazoltan Commented Mar 10 at 14:25
• I'm using Tailwind v4 (@tailwindcss/[email protected] @tailwindcss/[email protected]/ [email protected]) – Lewis Commented Mar 10 at 14:57
• Well, if you really want to use v4, just follow my answer and integrate it with Vite using the steps I've outlined. One very important change is that the tailwind.config.js file is gone, and instead, a CSS-first configuration has been introduced. The @tailwind directive (which you're using) has been removed, and instead, they introduced @import "tailwindcss". I really tried to provide sources for everything in my answer. – rozsazoltan Commented Mar 10 at 15:00
• I did the following for v4, installed tailwindcss and @tailwindcss/vite via npm, added @tailwindcss/vite plugin to my vite.config, and used @import "tailwindcss" for my CSS. The error persisted, but let me go through your answer in detail. – Lewis Commented Mar 10 at 15:01
• 1 It worked! Thank you so much. – Lewis Commented Mar 10 at 15:04

2 Answers 2

You seem to be using some v3 configs with some v4 configs at the same time.

Considering you want to use latest tailwindcss v4 with vite, you do not need to handle PostCSS manually.

Uninstall PostCSS, delete the PostCSS file and follow the steps here.

Your vite file seems to be correct.

Your index.css can lose the old v3 @tailwind directives in favour of the new @import "tailwindcss";

TailwindCSS v4

Starting from v4, TailwindCSS provides separate plugins for PostCSS and Vite. You don't need to use both. For Vite, just use @tailwindcss/vite and you're good to go.

• Get started with Tailwind CSS v4 with Vite - TailwindCSS v4 Docs
• How to use TailwindCSS v4 & Vite without PostCSS - StackOverflow
• Separated PostCSS plugin for TailwindCSS - StackOverflow

Additionally, the @tailwind directive has been deprecated since v4. Use

@import "tailwindcss";

instead.

• Removed @tailwind directives - StackOverflow

Compared to v3, several breaking changes have been introduced. Here are some references to review these changes:

• Upgrading your Tailwind CSS projects from v3 to v4 - TailwindCSS v4 Docs
• Deprecated: Sass, Less and Stylus preprocessors support - StackOverflow
• Problem TailwindCSS with Vite, after "npx tailwindcss init -p" - StackOverflow
• Error Installing Shadcn UI and Tailwind CSS in React.js Project with Vite - StackOverflow
• Automatic Source Detection from TailwindCSS v4 - StackOverflow
• TailwindCSS v4 is backwards compatible with v3 - StackOverflow

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:

• Get started with Tailwind CSS v3 with Vite - TailwindCSS v3 Docs