Darkmode not working on tailwind headless UI

Darkmode works everywhere in my react app, except on a headless ui combobox. I put a styled h1 in the same component and applied dark:bg-red-200(and any other style) no problem. The combobox accept all other tailwind utilities including attibutes like hover: but not the dark: property.

For others (such as me) stumbling upon this:

• E.g. the Dialog-component (and I assume others too) render right in the body tag (source)
• If you are using "the class strategy" to handle dark mode (i.e. adding a "dark" class to the wrapper) this will be a problem, because that class is not anymore parent to the Dialog (because your wrapper is also only a child to the body)

Solution I ended up using:

I ended up using useEffect to add the dark class to the body:

useEffect(() => {
  if(darkMode){
    document.body.classList.add('dark')
  }else{
    document.body.classList.remove('dark')
  }
}, [darkMode])