Tailwind styles are not being applied in Vite + React app

[Ysfmdht]

I'm trying to setup tailwind 4.1.8 in Vite app. I followed the docs in https://tailwindcss.com/docs/installation/using-vite . It does not want to apply styles no matter what I do. Here's my config files and the styles I am trying to apply

package.json :

{
  "name": "ds",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "@tailwindcss/vite": "^4.1.8",
    "react": "^19.1.0",
    "react-dom": "^19.1.0",
    "tailwindcss": "^4.1.8"
  },
  "devDependencies": {
    "@eslint/js": "^9.25.0",
    "@types/react": "^19.1.2",
    "@types/react-dom": "^19.1.2",
    "@vitejs/plugin-react": "^4.4.1",
    "eslint": "^9.25.0",
    "eslint-plugin-react-hooks": "^5.2.0",
    "eslint-plugin-react-refresh": "^0.4.19",
    "globals": "^16.0.0",
    "vite": "^6.3.5"
  }
}

vite.confing.js :

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

// https://vite.dev/config/
export default defineConfig({
    plugins: [react(), tailwindcss()],
});

index.css :

@import "tailwindcss";

main.jsx :

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

createRoot(document.getElementById('root')).render(
  <>
    <h1 className='text-red-500'>Hello</h1>
  </>,
)

Output :

I also tried using @tailwindcss/cli and it's still the issue. The output file is not generating new CSS no matter what class I write in the source files.

[Ysfmdht]

Ok, so I got to solve the problem in weird way. For some reason, tailwind v4 only works if I initialize git in the root directory. Can I report this as bug? I don't that's a good solution for it.

[wongjn]

See #18190 (comment)