Plugin layer specificity problem

[lubomirblazekcz]

Hello Tailwind team 👋,

I've run to a small issue with specificity when working with plugins and layers. I'm working on a small CSS framework https://winduum.dev/ which adds UI components written in plain CSS that can be used together with TailwindCSS, and can leverage modifiers. Winduum also adds a few new TailwindCSS utilities via plugin.

The problem I have is that currently I'm adding all components and utilities to components layer (via layers in CSS and addComponents in plugin), so that they are added before any TailwindCSS utilities which have bigger specificity, which is intended.

This is because when you add custom utilities to utilities layer (or plugin) they are added after TailwindCSS utilities, so they have bigger specificity than TailwindCSS, which is not always good.

Anyway my workaround works, everyting is in components layer which is before any TailwindCSS utilities and after TailwindCSS components. But?

But it's not good if you want to use per-component CSS. Which I know is not recommended, but actually accidentally works good with components layer if you don't use any tw components globally. If you add @tailwind components directive, the CSS inside layer componets stays only in the component styles and no other css from other layers is present (also works good with native CSS layers).

This of course doesn't work if you add any other css inside the components layer globally, which is the problem I'm having.

---

I'm having two ideas how to solve this issue.

First is to add ability to tell where the styles are added in layer and in plugins (before or after). Example would be @layer utilities.prepend or in plugins prepend: true. This way you can have all the utilities in correct layer with lower specificity than other tw utilities and you don't need to add your utilities to components layer.

The second idea is to introduce new layer for the use in SFC's, @layer components.single or something like that. This way the styles would stay only in the SFC and no global styles would leak into it. But the variant styles would still be appended to global variant layer.

@adamwathan I saw you are working on v4 and are introducing native css layers, which is great! I think it this would be great place to maybe introduce such such changes?