How to fix Tailwind PostCSS plugin error?

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

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