How to fix Tailwind PostCSS plugin error?

Question

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

Answer 1

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

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