How can I intergrate tailwindcss and postcss for React project in VIte?

Question

When I try to run my react project I am having this kind of error

npm run dev

> react-challenge@0.0.0 dev
> vite

failed to load config from E:\hp\Task\React-challenge\vite.config.js
error when starting dev server:
Error: 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.
    at zr (file:///E:/hp/Task/React-challenge/node_modules/tailwindcss/dist/lib.mjs:22:1720)
    at file:///E:/hp/Task/React-challenge/node_modules/.vite-temp/vite.config.js.timestamp-1740937809009-d3caf28be0035.mjs:10:17
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

I reinstalled my tailwindcss and postcss again however I get the same error. This my vite.config.js

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "tailwindcss";
import autoprefixer from "autoprefixer";

export default defineConfig({
  plugins: [react()],
    css: {
    postcss: {
      plugins: [tailwindcss(), autoprefixer()],
    },
  },
});

This is my tailwind.config.js

// tailwind.config.js
module.exports = {
    darkMode: 'class', // Enable class-based dark mode
    content: [
      './index.html',
      './src/**/*.{js,ts,jsx,tsx}',
    ],
    theme: {
      extend: {},
    },
    plugins: [],
};

This is my post.config.js

// postcss.config.js (ES Module syntax)
import tailwindcss from 'tailwindcss';
import autoprefixer from 'autoprefixer';

export default {
  plugins: [
    tailwindcss,
    autoprefixer,
  ],
};

Answer 1

From January, running npm install tailwindcss will install the new v4 version instead of v3.

The specific issue you're facing is caused by the fact that starting from v4, the Vite, PostCSS, and CLI modules have been split into 3 separate packages. A warning message has been placed in the runtime environment for developers migrating from v3, in case they accidentally overlook this breaking change.

TailwindCSS v3

If you want to use the v3 version, follow the updated v3 documentation and run the:

npm install tailwindcss@3

• Get started with Tailwind CSS - TailwindCSS v3 Docs

TailwindCSS v4

If you're interested in the new v4 version, check out the breaking changes, which I summarized here earlier:

• Get started with Tailwind CSS - TailwindCSS v4 Docs
• Upgrading your Tailwind CSS projects from v3 to v4 - TailwindCSS v4 Docs
• Cannot build frontend using TailwindCSS with PostCSS - StackOverflow
• Problem installing TailwindCSS after "npx tailwindcss init -p" command - StackOverflow

Here, specifically talking about the relationships between Vite, React, and TailwindCSS v4:

• Error in Tailwind CSS Implementation inside React App - StackOverflow

But any response related to v4 could be great for understanding the breaking changes in v4, after which you'll be able to easily install the new release.

TailwindCSS v4 & Vite without PostCSS (recommended)

Since you're using Vite, you don't need PostCSS. TailwindCSS v4 provides a separate plugin for both Vite (@tailwindcss/vite) and PostCSS (@tailwindcss/postcss).

To inject TailwindCSS into Vite, you only need to install the > following packages:

npm install tailwindcss @tailwindcss/vite

Then, modify the vite.config.js file as follows:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite' /* instead of @tailwindcss/postcss */

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

After that, you just need to insert the import into your CSS file:

@import "tailwindcss";

• Get Started TailwindCSS v4 with Vite - TailwindCSS v4 Docs