Tailwind CSS not generating standard utility classes however arbitrary classes working fine

Question

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?

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";