bug: "Important" setting from tailwind is not followed

[unlocomqx]

What version of daisyUI are you using?

latest

Which browsers are you seeing the problem on?

All browsers

Reproduction URL

https://play.tailwindcss.com/Yw301gqz1B

Describe your issue

The important setting of tailwind is not taken into account when adding components

It's useful for me because I'd like to use daisyUI in an embedded app and not affect the rest of the page.

PS: Tailwind plugin API allows passing an option to apply the important setting when adding components

[github-actions]

Thank you @unlocomqx for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

[saadeghi]

It's how Tailwind's important config works and we can't do anything about it on our side. It only applies the parent selector to utility classes, not component classes. I'm not sure if it's intentional or not and I don't know if there would be a downside if it works for component classes as well...

Can I ask about your project and why you need a parent selector for daisyUI classes?
If there's class name conflicts with other CSS libraries or custom styles, maybe daisyUI's prefix config would help?

Also another way to add a parent selector to all styles would be using a Post CSS plugin for that. There are some Post CSS plugins on NPM to do it.

I'm going to close this issue because there's nothing I can do about it on my end, it should either be done by Tailwind CSS (because it's their config) or it can be done by other tools.

[unlocomqx]

Hi @saadeghi

I develop ecommerce plugins so my interfaces are embedded inside other websites, that's why I needed the classes to be encapsulated. I use the parent selector #my-plugin for that and it works well with tailwind utility classes.

Component classes can be encapsulated easily using the Tailwind API. Tailwind leaves the choice to the plugin authors.

addComponents(buttons, {
  respectImportant: true
});

If you could make this change on the plugin calls, it would be a huge help for me. Thank you!

[unlocomqx]

If you fear this could lead to breakage in existing apps, I can add it as an option to the plugin. If you'd like, I can write a PR for it.

daisyui({
  respectImportant: true
})

[saadeghi]

That sounds great! I didn't know that. Is this option documented on Tailwind website?

Before adding this to daisyUI I have to make sure it doesn't break anything because daisyUI itself uses :is() selector for some components and I have to make sure they work as expected with this option.

[unlocomqx]

Thank you for your reply

It's documented for addUtilities in v1 and v2, but not in v3 (although the option still works)

Search for respectImportant here
https://v2.tailwindcss.com/docs/plugins