I am working on a Vite + React project using Tailwind CSS v4, integrated with the @tailwindcss/vite plugin. I am facing an issue where standard Tailwind utility classes (text-white, mt-0, bg-black) are not being generated. However, arbitrary value classes working fine (text-[#fff], mt-[0]).

vite.config.js

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

export default defineConfig({
  plugins: [react(), tailwindcss()],
  // Previously tried with:
  // css: {
  //   postcss: {
  //     plugins: [
  //       tailwindcss(), // Caused TS2769 error: Type Plugin<any>[] is not assignable to type AcceptedPlugin
  //     ],
  //   },
  // },
});

index.css

/* here google fonts */

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

body {
  margin: 0;
  padding: 0;
  font-family: "Inter", sans-serif;
}

main.tsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App'
import './index.css'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

package.json

{
  "name": "...",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "classnames": "^2.5.1",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-responsive": "^10.0.1",
    "swiper": "^11.2.5"
  },
  "devDependencies": {
    "@eslint/js": "^9.21.0",
    "@tailwindcss/vite": "^4.0.14",
    "@types/react": "^19.0.10",
    "@types/react-dom": "^19.0.4",
    "@vitejs/plugin-react": "^4.3.4",
    "autoprefixer": "^10.4.21",
    "eslint": "^9.21.0",
    "eslint-plugin-react-hooks": "^5.1.0",
    "eslint-plugin-react-refresh": "^0.4.19",
    "globals": "^15.15.0",
    "postcss": "^8.5.3",
    "tailwindcss": "^4.0.14",
    "typescript": "~5.7.2",
    "typescript-eslint": "^8.24.1",
    "vite": "^6.2.0"
  }
}

I am not using postcss.config.js. Files where I using TailwindCSS exactly fit to the content pattern. I tried literally all, rebuild, rerun, reinstall node_modules, adding safelist in tailwind.config.js. So what could be reason of problem?

I am working on a Vite + React project using Tailwind CSS v4, integrated with the @tailwindcss/vite plugin. I am facing an issue where standard Tailwind utility classes (text-white, mt-0, bg-black) are not being generated. However, arbitrary value classes working fine (text-[#fff], mt-[0]).

vite.config.js

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

export default defineConfig({
  plugins: [react(), tailwindcss()],
  // Previously tried with:
  // css: {
  //   postcss: {
  //     plugins: [
  //       tailwindcss(), // Caused TS2769 error: Type Plugin<any>[] is not assignable to type AcceptedPlugin
  //     ],
  //   },
  // },
});

index.css

/* here google fonts */

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

body {
  margin: 0;
  padding: 0;
  font-family: "Inter", sans-serif;
}

main.tsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App'
import './index.css'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

package.json

{
  "name": "...",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "classnames": "^2.5.1",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-responsive": "^10.0.1",
    "swiper": "^11.2.5"
  },
  "devDependencies": {
    "@eslint/js": "^9.21.0",
    "@tailwindcss/vite": "^4.0.14",
    "@types/react": "^19.0.10",
    "@types/react-dom": "^19.0.4",
    "@vitejs/plugin-react": "^4.3.4",
    "autoprefixer": "^10.4.21",
    "eslint": "^9.21.0",
    "eslint-plugin-react-hooks": "^5.1.0",
    "eslint-plugin-react-refresh": "^0.4.19",
    "globals": "^15.15.0",
    "postcss": "^8.5.3",
    "tailwindcss": "^4.0.14",
    "typescript": "~5.7.2",
    "typescript-eslint": "^8.24.1",
    "vite": "^6.2.0"
  }
}

I am not using postcss.config.js. Files where I using TailwindCSS exactly fit to the content pattern. I tried literally all, rebuild, rerun, reinstall node_modules, adding safelist in tailwind.config.js. So what could be reason of problem?

• reactjs
• tailwind-css
• tailwind-css-4

• I slightly improved the formatting of your question, and that’s when something caught my eye: "in tailwind.config.js"; starting from v4, tailwind.config.js is no longer required. Instead, a CSS-first configuration has been introduced. However, you still have the option to revert to the legacy JS-based configuration if needed. --- You can read more about it here: New CSS-first configuration option in v4 – rozsazoltan Commented Mar 15 at 9:57
• Other related breaking changes: What's changed in v4; and How to install React with TailwindCSS v4 using PostCSS -> with PostCSS or from v4 can use directly Vite integrated @tailwindcss/vite plugin. – rozsazoltan Commented Mar 15 at 9:57
• Caused TS2769 error: Type Plugin<any>[] is not assignable to type AcceptedPlugin - The error message you received is due to a change in TailwindCSS starting from v4, where it was split into multiple separate packages. Until v3, the CLI and PostCSS engine were bundled into a single package. However, from v4 onwards, they have been separated into: @tailwindcss/cli and @tailwindcss/postcss. Additionally, a new package, @tailwindcss/vite, was introduced. --- Now, developers install one of these three packages based on how they want to integrate TailwindCSS v4 into their project. – rozsazoltan Commented Mar 15 at 10:00

1 Answer 1

It looks like you've installed TailwindCSS v4, but you're using deprecated @tailwind directives. From v4 onwards, reference Tailwind in CSS like this:

index.css

/*
  DEPRECATED
@tailwind base;
@tailwind components;
@tailwind utilities;
*/

@import "tailwindcss";