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.

5 replies

maialks Jun 19, 2025
Author

thanks man, here you go

wongjn Jun 19, 2025
Collaborator

Seems to be working as expected for me:

maialks Jun 19, 2025
Author

For me it's like this 😕

In the comments bellow the guy mentions add a @source "../../../libs/";, witch may be a possible solution for me, but where should this point to?

wongjn Jun 19, 2025
Collaborator

It should be a relative path to a folder that has all the templates and files that contain Tailwind class names. Since that screenshot does not seem to be the exact same as the one you provided, consider checking you have run git init in the root folder of the project.

maialks Jun 19, 2025
Author

This indeed worked, and thanks a lot for that! It's becouse without a Git repository initialized, Tailwind by default ignores all files. However, when the project is a repository, it uses .gitignore to decide which files it should ignore.

But there's one thing: my actual Git repo is at a higher level (fullstack-open), and this folder is just a subfolder (fullstack-open/Part 7/part7exercises/frontend). Having a repository inside another repository makes Git treat this inner repo as a submodule and ignore it. I tried using @source manually inside my index.css (e.g., @import "tailwindcss" source("../src") or even source(none) + @source "../"), but for some reason, that didn't really fix it. Maybe I'm missing something.

nathan-de-pachtere · 2025-06-19T14:27:49Z

nathan-de-pachtere
Jun 19, 2025

I have the same issue, maybe related to this #18236

It's like something changed inside the source automatic files detection https://tailwindcss.com/docs/detecting-classes-in-source-files

2 replies

wongjn Jun 19, 2025
Collaborator

Yep, there was a source detection change in v4.1.8, see #16631.

nathan-de-pachtere Jun 19, 2025

Since I'm working within a monorepo, I needed to add @source "../../../libs/"; so that Tailwind could locate my components and other styles, as my CSS files are also inside the libs folder under their own packages.

It's working perfectly now, but it took me a while to figure out what was going on.

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: 2 comments · 7 replies

Uh oh!

wongjn Jun 19, 2025 Collaborator

Uh oh!

maialks Jun 19, 2025 Author

Uh oh!

wongjn Jun 19, 2025 Collaborator

Uh oh!

maialks Jun 19, 2025 Author

Uh oh!

wongjn Jun 19, 2025 Collaborator

Uh oh!

Uh oh!

maialks Jun 19, 2025 Author

Uh oh!

Uh oh!

nathan-de-pachtere Jun 19, 2025

Uh oh!

wongjn Jun 19, 2025 Collaborator

Uh oh!

nathan-de-pachtere Jun 19, 2025

maialks
Jun 18, 2025

`vite.config.js`

`src/index.css`

`index.html`

`src/main.jsx`

Replies: 2 comments 7 replies

wongjn
Jun 19, 2025
Collaborator

maialks Jun 19, 2025
Author

wongjn Jun 19, 2025
Collaborator

maialks Jun 19, 2025
Author

wongjn Jun 19, 2025
Collaborator

maialks Jun 19, 2025
Author

nathan-de-pachtere
Jun 19, 2025

wongjn Jun 19, 2025
Collaborator