Tailwind CSS Not Working? Here is the New 2025 Setup Guide (v4 Updated)

If you are following a tutorial from 2023 or 2024, chances are your Tailwind setup is broken. The ecosystem has shifted. We are moving away from complex configuration files towards zero-config setups using Vite Plugins and PostCSS modules.

Below is the Correct, Updated Method for the major frameworks.

1. Next.js (The App Router Method)

Next.js now uses the @tailwindcss/postcss package for a smoother integration.

Step 1: Create Project

Bash

npx create-next-app@latest my-project --typescript --eslint --app
cd my-project

Step 2: Install Dependencies

Bash

npm install tailwindcss @tailwindcss/postcss postcss

Step 3: Configure PostCSS

Create a file named postcss.config.mjs in your root folder and paste this:

JavaScript

const config = {
plugins: {
"@tailwindcss/postcss": {},
},
};
export default config;

Step 4: Import Tailwind

Open ./app/globals.css and replace everything with this single line:

CSS

@import "tailwindcss";

Step 5: Run

Bash

npm run dev

2. React Router / React (The Vite Plugin Method)

The new @tailwindcss/vite plugin makes integration seamless for React, SolidJS, and SvelteKit.

Step 1: Create Project

Bash

npm create vite@latest my-project -- --template react-ts
cd my-project

Step 2: Install Plugin

Bash

npm install tailwindcss @tailwindcss/vite

Step 3: Update Vite Config

Open vite.config.ts and add the Tailwind plugin:

TypeScript

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
plugins: [
tailwindcss(),
],
})

Step 4: Import CSS

In your CSS file (usually src/index.css), simply add:

CSS

@import "tailwindcss";

Step 5: Run

Bash

npm run dev

3. Vue.js (The Vite Plugin Method)

Since Vue uses Vite by default, we use the same modern plugin approach as React. This is the cleanest way to use Tailwind with Vue in 2025.

Step 1: Create Project

Bash

npm create vite@latest my-vue-project -- --template vue
cd my-vue-project

Step 2: Install Tailwind & Vite Plugin

Bash

npm install tailwindcss @tailwindcss/vite

Step 3: Configure Vite

Open vite.config.ts. Import the Tailwind plugin and add it to the plugins array before or after the Vue plugin:

TypeScript

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
plugins: [
vue(),
tailwindcss(),
],
})

Step 4: Import Styles

Open your main CSS file (e.g., ./src/style.css) and add:

CSS

@import "tailwindcss";

Step 5: Run

Bash

npm run dev

4. Angular (The PostCSS Method)

Angular requires a specific PostCSS configuration file to handle the new Tailwind build process.

Step 1: Create Project

Bash

ng new my-project --style css
cd my-project

Step 2: Install Dependencies

Note the usage of --force to resolve peer dependency issues in some environments.

Bash

npm install tailwindcss @tailwindcss/postcss postcss --force

Step 3: Configure PostCSS

Create a .postcssrc.json file in the root of your project:

JSON

{
"plugins": {
"@tailwindcss/postcss": {}
}
}

Step 4: Import Tailwind

Add the import to your ./src/styles.css:

CSS

@import "tailwindcss";

Step 5: Run

Bash

ng serve

Why did it change?

The old way required scanning your files (the content: [] array) to generate CSS. The new Vite Plugin and PostCSS methods are "Just-in-Time" by default and deeply integrated into the build tool. This means:

1. Faster build times.
2. No more "missing class" bugs because you forgot to add a folder path.
3. Cleaner configuration files.

For more details on specific frameworks, always check the official guide below.

🔗 Official Documentation: Tailwind CSS Framework Guides