Dark mode styles not applying to <select> and <option> elements in Tailwind v4

[danifara3]

Dark mode works as expected for most elements, but and elements do not change background or text color in dark mode, they remain with a white background and white text, making them unreadable. Steps to reproduce: Install Tailwind CSS v4. Use only the global CSS setup (@tailwind base; @tailwind components; @tailwind utilities;) without a config file. Implement dark mode with next-themes and ThemeProvider using attribute="class". Add a element with children.

Switch to dark mode.

Expected behavior:
and elements should respect Tailwind dark mode classes (e.g., dark:bg-gray-800 dark:text-white). Actual behavior: In dark mode, and elements keep a white background and white text, ignoring Tailwind dark mode classes.

Additional context:

Tailwind version: 4.x

Next.js version: [your version]

Using next-themes with ThemeProvider and attribute="class".

Global CSS includes the recommended Tailwind v4 imports.

Manually applying dark:bg-* or dark:text-* works for other elements, but not for inside .