Error in Tailwind CSS Implementation inside React App

Question

I installed the react app using npm's vite@latest command

npm create vite@latest my-portfolio -- --template react

Then I installed the tailwind css using below command inside my-portfolio/ directory

npm install -D tailwindcss postcss autoprefixer

Since npx tailwindcss init -p doesn’t work as my React v19, I manually created these files:

tailwind.config.js

export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

postcss.config.js

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

Also added CSS lines in src/index.css

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

After I run the npm run dev command I get this below 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.

rozsazoltan · Accepted Answer · 2025-02-22 13:19:38Z

1

Thanks for the answers you all shared. Tailwind I use is v4 itself

I just changed the postcss.config.js file to postcss.config.mjs

and pasted below lines

export default {
   plugins: {
      "@tailwindcss/postcss": {},
   }
}

then executed the npm run dev command

edited Feb 22 at 13:19

rozsazoltan

18.2k7 gold badges49 silver badges143 bronze badges

answered Feb 22 at 12:55

Sayuj Raghavan

3376 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

rozsazoltan · Accepted Answer · 2025-02-24 07:36:06Z

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

TailwindCSS v4

To install TailwindCSS v4, please refer to the updated installation and upgrade guides.

Get started with Tailwind CSS - TailwindCSS v4 Docs
Upgrading your Tailwind CSS projects from v3 to v4 - TailwindCSS v4 Docs

Some related question for v4 upgrade. There are some references related to specific packages beyond the v4 update, but they all provide excellent explanations of the v4 changes. Reading through them will give you a more comprehensive understanding of the updates and the new v4 operating principles.

v4 features a completely new, faster Rust-based engine with the LightningCSS processor. Due to the use of LightningCSS, support for other preprocessors has been discontinued, and TailwindCSS now aims to fulfill their roles independently.
- Deprecated: Sass, Less and Stylus preprocessors support
- Error Installing Shadcn UI and Tailwind CSS in React.js Project with Vite
From v4 onwards, tailwind.config.js is no longer required. The new CSS-first configuration can be used with the new CSS directives. However, if needed, the @config directive can be used to specify a JS-based configuration.
- v4 is backwards compatible with v3 - Using tailwind.config.js by @config directive
The command to run is now no longer npx tailwindcss but npx @tailwindcss/cli.
- Problem installing TailwindCSS with Vite, after "npx tailwindcss init -p" command
The @tailwind directives have been deprecated and replaced with @import "tailwindcss".
- Removed @tailwind directives
From v4 onwards, source declaration is no longer required, as automatic source detection handles this automatically, ignoring only the paths listed in .gitignore.
- Automatic Source Detection from TailwindCSS v4

PostCSS plugin and CLI are separate packages — the main tailwindcss package doesn't include these anymore since not everyone needs them, instead they should be installed separately using @tailwindcss/postcss and @tailwindcss/cli.

Source: Open-sourcing our progress on Tailwind CSS v4.0 - Whats changed

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

npm list tailwindcss ├─┬ @tailwindcss/[email protected] │ ├─┬ @tailwindcss/[email protected] │ │ └── [email protected] deduped │ └── [email protected] deduped ├─┬ @tailwindcss/[email protected] │ └── [email protected] deduped └── [email protected]
I use tailwind v4 itself @rozsazoltan , thanks for your support

Collectives™ on Stack Overflow

Error in Tailwind CSS Implementation inside React App

2 Answers 2

Comments

TailwindCSS v3

TailwindCSS v4

TailwindCSS v4 & Vite without PostCSS (recommended)

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

TailwindCSS v3

TailwindCSS v4

TailwindCSS v4 & Vite without PostCSS (recommended)

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related