bug: Apply on badge-outline not working

[0xtlt]

Reproduction URL (Required)

https://play.tailwindcss.com/2Ob1WJUIAx?file=css

What version of daisyUI are you using?

v5.0.0

Which browsers are you seeing the problem on?

Firefox, Chrome

Describe your issue

Hi!

When I'm applying a badge utility and badge-sm etc... in my css file, everything's working properly, but when I add in my @apply: badge-outline

Tailwind logs: Cannot apply unknown utility class: badge-outline

What did I miss?

[github-actions]

Thank you @0xtlt 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.

[bhuynhdev]

I'd say this is an unfortunate case of "working as intended" due to current TailwindCSS limitations

This issue has been discussed before here: #3535 (comment)

Basically, the reason this happens is those modifier classes (badge-outline) are not actual TailwindCSS utility classes. They are nested in CSS and acts more like a "modifier", like this:

.badge{
    &.badge-outline {
      /* style */
    }
}

So badge-outline is just a normal/custom class string that exists in DaisyUI stylesheet, but TailwindCSS have no knowledge about it, because there seems to be no way to declare nested utility modifier in Tailwind right now

Maybe one way to solve this is for DaisyUI to expose these modifier classes as utility classes that does nothing. That would make it appear in Intellisense, and make @apply works (though it will do nothing if you don't have class badge accompanying it.) Downside is Intellisense also wouldn't be able to trace to the exact style definition of these classes - hovering would just show an empty class

[saadeghi]

As @bhuynhdev said.
Regardless of it working or not, I wouldn't suggest using @apply for component class names.
@apply should only be used for simple, one-line utility classes like padding, colors, etc.

• Utility classes are usually one or 2 CSS rules and @apply can extend them with no side effects.
• Component classes are usually more complicated selector. They may have relational selectors (sibling, child, parent, nesting, etc) and @apply can not extend the exact same style because there's high chance it will create loops or a large amount of unwanted styles.

I'm working on exposing the nested class names to make them show up in Intellisense…

Let me know if you have a question.