Customizing Tailwind Utilities With CSS Layers And Variants
Tailwind's `@layer dip` variant allows overriding utility classes in a lower specificity, useful for components & utilities, but has limitations & is not a replacement for tw-merge.
So before diving into this, this code straight up isn't mine and I just found it on github written by gustavopch which is just an implementation of a tweet from tailwind's creator, Adam Wathan.
what is it
It's basically just a custom variant that does one thing, places utilities you use in a lower specificity:
@variant dip {
@layer dip {
@slot;
}
}
the above variant will place all CSS properties on a layer called dip. Since all tailwind utilities go in a layer called utilities, dip is actually a child of that initial layer.
And with the way CSS hand...