.dark section not included in tailwind output

[tonyxiao]

This is probably not a shadcn problem but I could really use some help figuring it out. For some reason my dark mode does not work because the css variables .dark in global.css that shadcn uses never get included in the final css output of tailwind. If I manually add it to the className of html element then it works, but of course that doesn't work because it prevents switching. Anyone got idea why tailwind would exclude .dark section from output even though the tailwind.config.js uses darkMode: class?

[dninomiya]

@tonyxiao
I had the same problem. Putting the CSS variable definition out of @layer worked. My understanding is that these definitions don't have to be inside @layer .

From

@layer base {
  :root ...
  .dark ...
}

To

:root ...
.dark ...

[mogeko]

This is definitely caused by Tailwind CSS's stupid purge engine!

You can fix it by safelist.

https://tailwindcss.com/docs/content-configuration#safelisting-classes

module.exports = {
  darkMode: ["class"],
  content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"],
  safelist: ["dark"],
  theme: {
    // ...
  },
  plugins: [require("tailwindcss-animate")],
}

[tonyxiao]

Great workaround, thanks @mogeko . Do you happen to know why this may happen?

[mogeko]

Of course! @tonyxiao,

Tailwind CSS will automatically delete those unused CSS to keep the package thin. However, this should not happen when you set darkMode: "class" and use dark variant in your app. I don't know why it happened to you.

I have encountered the same problem for unknown reason before, I used safelist to prevent Tailwind from deleting my code. I hope this can help you.

[piet-maier]

I encountered the same problem, and fixed it by moving the CSS out of the layer declaration. As far as I can tell, https://ui.shadcn.com/ uses the CSS variables approach as well, and inspecting the website shows the dark class in the generated CSS. I would be interested in knowing what we are doing differently.

[bigxalx]

I fixed it by removing darkMode: "class" from the tailwind config.

[taep96]

Doing that actually breaks more things, this is the correct way to fix this

[bigxalx]

Thanks for the comment, but your referenced solution does not fix it for me. Only thing working so far is what I described above.