fix: !important on display property

[emanuele-em]

🔗 Linked issue

Resolves #5492

❓ Type of change

• 🐞 Bug fix (a non-breaking change that fixes an issue)

📚 Description

without the important, the property display is overrided by :where(.i-lucide\:sun) property and :where(.i-lucide\:moon) property

before:

after (as expected):

📝 Checklist

• I have linked an issue or discussion.

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@5554

commit: 3117a53

[benjamincanac]

As mentioned in #5492, we need a reproduction to understand your issue. We haven't reproduced any issue with the ColorModeButton anywhere. I'm unable to merge this without understanding the issue first and I don't think using important is the correct solution here.

[emanuele-em]

I’ve added a screenshot of the issue in the PR description.
My package.json includes:

• @nuxt/ui: ^4.1.0
• nuxt: ^4.1.3

The problem is that the Tailwind CSS hidden class is being overridden by the :where(.i-lucide\:sun) selector.

I’m using pnpm as the package manager (not sure if it matters) and testing in the Arc browser.

[benjamincanac]

Yes but I don't reproduce this behavior anywhere so it must be something related to your config, some examples:

• https://starter-template.nuxt.dev/
• https://starter-vue-template.nuxt.dev/
• https://docs-template.nuxt.dev/
• https://nuxt.com/
• ...

[benjamincanac]

Did you change CSS layer ordering?

[benjamincanac]

I just pushed this 2ce9af2 to improve class merging and use inline-block instead of inline but I'm not sure it will solve your issue 😬

[emanuele-em]

@benjamincanac fixed, the problem was a conflict with nuxt/icons module.