1

When I try to run my react project, I get this error:

npm run dev

> [email protected] 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,
  ],
};
Improve this question

1 Answer 1

Reset to default
3

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

TailwindCSS v4

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

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

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";
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.