Tailwind `dark` class doesn't work in frontend

[civic gulch]

I don't know if I'm missing something, but I just spent a bit of time trying to figure out why this code in my layout didn't swap to my dark mode background:

<div
  className="fixed inset-0 -z-50 w-full h-full dark:bg-[url('/camo-dark.png')] bg-[url('/camo.png')] bg-repeat bg-auto"
  style={{ backgroundAttachment: 'fixed' }}
  aria-hidden="true"
/>

after some trial and error and searching I found I had to add this to tailwind.config.mjs:

  darkMode: 'class',

I would have thought an app that contains a ThemeSelector in its footer by default should already have the correct config for Tailwind.

[prime spindle]

New Community-Help Thread Created!

Help is on the way! To mark it as solved, use the /solve command. In the meantime, here are some existing threads that may help you:

Documentation:

• Customizing CSS & SCSS - CSS Library - Dark Mode
• The Admin Panel - Light and Dark Modes
• Customizing CSS & SCSS - CSS Library

Community-Help:

• Want to use TailwindCSS in place of .scss styles
• Can I use next-payload and pages directory (pages router) or not?
• Is dark mode broken on the Payload-NextJS setup?
• How to remove Payload’s default styles (buttons, borders, backgrounds) when using shadcn + Tailwind?

[flint quiver]

Tailwind's darkMode: "class" strategy assumes the dark class set on a parent like html or body, PayloadCMS however sets data-theme="dark" on the html element, so you'd have to do this:

darkMode: ["selector", ':is(.dark, [data-theme="dark"])']```