Color classes not working in TailwindCSS with Vite + React

[Amoo-Amir]

What version of Tailwind CSS are you using?

tailwindcss@4.1.8

What build tool (or framework if it abstracts the build tool) are you using?

postcss@8.5.4 , vite@4.5.14

What version of Node.js are you using?

v22.14.0

What browser are you using?
googel chrom
microsoft Edge

What operating system are you using?

Windows 11

Reproduction URL

A Tailwind Play link or public GitHub repo that includes a minimal reproduction of the bug. Please do not link to your actual project, what we need instead is a minimal reproduction in a fresh project without any unnecessary code. This means it doesn't matter if your real project is private/confidential, since we want a link to a separate, isolated reproduction anyways.

A reproduction is required when filing an issue — any issue opened without a reproduction will be closed and you'll be asked to create a new issue that includes a reproduction. We're a small team and we can't keep up with the volume of issues we receive if we need to reproduce each issue from scratch ourselves.

Describe your issue

When using Tailwind CSS with Vite and React, all utility classes work correctly except for color-related classes. For example, classes like bg-black, text-white, and text-red-500 have no visual effect. Other utilities such as flex, h-screen, border, w-40, etc. are working fine.

I’ve verified that the CSS file is being loaded correctly, the PostCSS setup is working, and Tailwind classes are present in the compiled output. The only issue is that color classes do not apply.

Is this a known issue or am I missing a specific configuration for color support?

[wongjn]

Consider checking your browsers meet the supported browsers. Otherwise, please provide a git repo that reproduces the unexpected behavior.

[Amoo-Amir]

Hi,
Here is the minimal reproduction repository as requested:
🔗 https://github.com/Amoo-Amir/tailwind-react-tes-

Let me know if you need anything else 🙏

[wongjn]

Thank you! So you'd want to follow the installation instructions for Vite. For your repo, you'd want to make the following changes to be inline with the aforementioned installation method:

• Install and uninstall the appropriate packages:

  $ npm uninstall @tailwindcss/postcss autoprefix postcss
  $ npm install @tailwindcss/vite
  

• Configure the @tailwindcss/vite Vite plugin in vite.config.js:

  import { defineConfig } from 'vite';
  import tailwindcss from '@tailwindcss/vite';
  
  export default defineConfig({
    plugins: [
      tailwindcss(),  
    ],
  });

• Delete postcss.config.js, tailwind.config.js.
• Create an src/styles.css file (can actually be named anything and be anywhere in the project):

  @import "tailwindcss";

• Link the CSS file. As an example:

     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <title>Vite + React + Tailwind</title>
  +  <link href="/src/styles.css" rel="stylesheet">
   </head>

[Amoo-Amir]

its not working on my pc.

[Amoo-Amir]

After renaming vite.config.js to vite.config.mjs , Tailwind started working correctly.