Tailwind stopped working and I don't know why #18341

maialks · 2025-06-18T22:07:50Z

maialks
Jun 18, 2025

Environment:

Tailwind CSS ^4.1.10
Vite ^6.2.6
React 18.2.0

I followed the official Tailwind + Vite + React guide, and everything was working fine—until it suddenly stopped, and I haven’t changed anything in vite.config.js or index.css.

There are no console errors, and I can confirm the CSS is being loaded. For example, I still see custom styles like:

a.active {
  display: none;
}

That means the CSS file is working—but Tailwind utility classes just don’t apply anymore. Any ideas what might be causing this?

Configuration files

`vite.config.js`

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
  server: { /* ...your server config... */ }
})

`src/index.css`

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@100..800&display=swap');
@import 'tailwindcss';

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --color-primary: var(--color-primary);
  --color-secondary: var(--color-secondary);
  --color-background: var(--color-background);
  --color-nav-bg: var(--color-nav-bg);
  --color-sec-bg: var(--color-sec-bg);
  --font-sora: 'Sora';
}

@layer theme {
  :root {
    --color-primary: #eaeaea;
    --color-secondary: #080d0a;
    --color-background: #ede8dc;
    --color-nav-bg: #948979;
    --color-sec-bg: #7b7e6b;
  }
  .dark {
    --color-primary: #080d0a;
    --color-secondary: #eaeaea;
    --color-background: #212121;
    --color-nav-bg: #1a1a1d;
    --color-sec-bg: #603b3c;
  }
}

a.active {
  display: none;
}

`index.html`

<!doctype html>
<html lang="en" class="h-full">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
  </head>
  <body class="h-full">
    <div id="root" class="h-full w-full"></div>
    <script>
      (function () {
        const storedTheme = localStorage.getItem('theme');
        const prefersLight = window.matchMedia('(prefers-color-scheme: light)').matches;
        const theme = storedTheme || (prefersLight ? 'light' : 'dark');
        document.documentElement.classList.toggle('dark', theme === 'dark');
      })();
    </script>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

`src/main.jsx`

import React from 'react'
import ReactDOM from 'react-dom/client'
import { Provider } from 'react-redux'

import './index.css'
import ThemeProvider from './contexts/ThemeContext'
import App from './App'
import store from './app/store'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Provider store={store}>
      <ThemeProvider>
        <App />
      </ThemeProvider>
    </Provider>
  </React.StrictMode>
)

wongjn · 2025-06-19T06:01:19Z

wongjn
Jun 19, 2025
Collaborator

Consider providing a git repo that reproduces the issue and we can take a look for you.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Tailwind stopped working and I don't know why #18341

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Tailwind stopped working and I don't know why #18341

Uh oh!

Uh oh!

maialks Jun 18, 2025

Configuration files

vite.config.js

src/index.css

index.html

src/main.jsx

Replies: 1 comment

Uh oh!

wongjn Jun 19, 2025 Collaborator

maialks
Jun 18, 2025

`vite.config.js`

`src/index.css`

`index.html`

`src/main.jsx`

wongjn
Jun 19, 2025
Collaborator