v4: UColorModeImage not working

[BenjaminOddou]

Environment

• Operating System: Linux
• Node Version: v20.12.0
• Nuxt Version: 4.0.3
• CLI Version: 3.28.0
• Nitro Version: 2.12.4
• Package Manager: pnpm@8.15.6
• Builder: -
• User Config: modules, devtools, compatibilityDate, css
• Runtime Modules: @nuxt/ui@4.0.0-alpha.0
• Build Modules: -

Version

v4.0.0-alpha.0

Reproduction

https://codesandbox.io/p/devbox/amazing-mestorf-s4dswr

Description

Only light image is displayed.

Additional context

No response

Logs

[rijenkii]

Seems like tailwinds dark: modifier does not work at all:

[HugoRCD]

I'm looking into it but what's weird is that it works fine on the docs though https://ui4.nuxt.com/docs/components/color-mode-image 🤔

[BenjaminOddou]

I think this is something related to how tailwind css classes are loaded. If I add the html elements behind the UColorModeImage component it's working fine.

SNAG-0000.mp4

[benjamincanac]

Thanks for the report 😊