How to use dark mode?

[murolem]

I have a wrapper class with dark class and I'm trying to use the Select component, Specifically the reusable one https://bits-ui.com/docs/components/select#reusable-components with styles from the main example, but only the light mode styles work. No matter what I do the dark mode styles do not apply.

I have minimal experience with tailwind so idk its quirks.

[Nic-Polumeyv]

This is Tailwind rather than Bits UI. The example styles use dark: variants, and in Tailwind v4 those respond to the operating system preference through prefers-color-scheme by default. A dark class on a wrapper does nothing until you override the variant in your CSS entry file:

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

With that in place the dark: styles apply whenever the dark class is present earlier in the HTML tree, so your wrapper approach works. The docs page for this is https://tailwindcss.com/docs/dark-mode. If you are still on Tailwind v3 the equivalent is darkMode: 'class' in tailwind.config.js.