Tailwind CSS v4 with React + Vite: Styles not applied on first load in dev mode

[Moonhyeseong]

I am experiencing an issue with Tailwind CSS v4 in a Vite project where styles are not applied on the first page load when running pnpm dev. However, after a manual refresh (F5), Tailwind styles are applied correctly. This issue does not occur in production builds (pnpm build && pnpm preview), where styles are immediately available.

This behavior suggests that Tailwind’s auto-content discovery or Vite’s HMR may not be correctly detecting the styles on the initial dev build.

Steps to Reproduce
1. Initialize a Vite + React project using Tailwind CSS v4.
2. Install dependencies:

pnpm install

3.	Start the development server:

pnpm dev

4.	Open the browser and observe that Tailwind styles are not applied.
5.	Refresh the page manually (Ctrl + R / Cmd + R), and Tailwind styles appear as expected.

Expected Behavior

Tailwind styles should be applied immediately on the first page load in dev mode, without requiring a manual refresh.

Actual Behavior
• On the initial page load, Tailwind styles are missing.
• After manually refreshing the page, the styles appear correctly.
• Production build works without issues.

Development Environment

{
  "name": "my-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "@tailwindcss/vite": "^4.0.4",
    "@tanstack/react-query": "^5.66.0",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "tailwind-merge": "^3.0.1",
    "tailwind-scrollbar-hide": "^2.0.0"
  },
  "devDependencies": {
    "@eslint/js": "^9.19.0",
    "@locator/babel-jsx": "^0.4.4",
    "@tanstack/eslint-plugin-query": "^5.66.0",
    "@types/react": "^19.0.8",
    "@types/react-dom": "^19.0.3",
    "@typescript-eslint/eslint-plugin": "^8.23.0",
    "@typescript-eslint/parser": "^8.23.0",
    "@vitejs/plugin-react": "^4.3.4",
    "eslint": "^9.20.0",
    "eslint-plugin-react": "^7.37.4",
    "eslint-plugin-react-hooks": "^5.0.0",
    "eslint-plugin-react-refresh": "^0.4.18",
    "globals": "^15.14.0",
    "prettier": "^3.4.2",
    "prettier-plugin-tailwindcss": "^0.6.11",
    "tailwindcss": "^4.0.4",
    "typescript": "~5.7.3",
    "typescript-eslint": "^8.22.0",
    "vite": "^6.1.0",
    "vite-plugin-svgr": "^4.3.0"
  }
}

[GeorgiosDrivas]

Make sure you have followed the tailwind CSS official setup guide.

There seems to be no problem with the code you have provided. Can you share the vite.config.js file?

[Moonhyeseong]

Additionally, when I downgraded to version 3.x and changed the settings accordingly, the above problem did not occur.

[GeorgiosDrivas]

So the issue happens only with tailwind version 4.0.4?

[Moonhyeseong]

Yes that's right

[EslamFoda]

any fix for this issue ? i have the same problem also using Tailwind CSS v4 with React + Vite in dev mode

[uma-uc]

That dd not work for me.

[GeorgiosDrivas]

First of all, in your vite.config file, in the plugins array remove the tailwindcss() because tailwind v4 integrates automatically when the tailwindcss package is installed.
Also, try changing the import statement so that it comes from tailwind itself.

So your vite.config file should be:

`
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwind from 'tailwindcss'
import path from 'path';
import svgr from 'vite-plugin-svgr';

export default defineConfig({
plugins: [
react(),
svgr(),
],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
'@/types': path.resolve(__dirname, './src/types'),
'@/hooks': path.resolve(__dirname, './src/hooks'),
'@/assets': path.resolve(__dirname, './src/assets'),
},
},
});
`

If none of this works, you can try deleting your node_modules folder and then running
pnpm install

I have never experienced this issue before so I apologize for wasting your time.
If the error persists, try contacting with the official tailwind css support

[minhdtb]

same error with tailwindcss 4. Works fine when downgrade to 3.x and use postcss

[Doctorthe113]

case

Mayne ive had been struggling with this for hours. I thought something else broke. Your reply helped me. Also this is really fricking stupid that tailwind uses .gitignore to ignore files. I want to be able to ignore my source code while keep something public.

[RobinMalfait]

.gitignore is just the default, you can use @source and @source not to include or exclude files and folders:

• https://tailwindcss.com/docs/detecting-classes-in-source-files#explicitly-registering-sources
• https://tailwindcss.com/docs/detecting-classes-in-source-files#ignoring-specific-paths

[dydent]

I have the same issue in my tailwind.config.ts in a monorepo setup using vite and tailwind 4.

[Doctorthe113]

.gitignore is just the default, you can use @source and @source not to include or exclude files and folders:

* https://tailwindcss.com/docs/detecting-classes-in-source-files#explicitly-registering-sources

* https://tailwindcss.com/docs/detecting-classes-in-source-files#ignoring-specific-paths

Thanks. Good to know 😄