Tailwind Utility Layer clashing.

[codytooker]

Problem

Tailwind CSS Layer clashing from blazorblueprint.css to internal stylesheet.

Description

There has been numerous issues/pull request on this going back and forth but I still run into an issue with classes overriding each other. For instance I have a div like this

<div class="grid gap-2 sm:grid-cols-2 md:grid-cols-4">
   ...
</div>

With Blueprints stylesheet second in App.razor the md:grid-cols-4 that is produced in my css file is overwritten by sm:grid-cols-2 that is in blueprints stylesheet. In order to get t his to work I need to change the order of the <link tags in App.razor`.

However doing that brings up another issue in the opposite way. Pagination in the DataGrid component is in a div like the following

<div class="hidden sm:flex">
  ...pagination stuff
</div>

The problem here is my css is producing hidden but not sm:flex therefore hidden has priority as it's last loaded.

Thoughts

I don't think just moving layers around is going to work for other reasons that have been discovered and fixed in previous PR's

Potential Solution

I haven't tested this at all but I think a solution to this may be for the BluePrint library to implement a tailwind prefix and a layer. That way classes never clash and if you make the layer come before tailwinds utilities layer then app level utilities will always override bb layer utilities.

If that doesn't work then I think maybe the only real complete fix, which I know is not ideal at all is for the library to produce a css file that we can import into our tailwind process. I know this presents other problems like diff css files for different versions but it would prevent all issues.

Another way I could see this being 100% solved would be for the library to switch to not using utilities directly and instead using @apply for everything so the style sheet that is produced doesn't actually contain any utilties and instead has "components"

[HugoVG]

I have the same problem, the work around for has been using something like

<div class="hidden sm:inline-flex! md:grid! lg:flex! ...">
...
</div>

[codytooker]

My Current work around is to have my app css to be second in App.razor and I have this in my app.css file

@source inline("{sm:,md:,lg:,xl:,2xl:}{flex,block,inline-flex,inline-block,grid,table-cell,hidden}");

I don't necessarily think this will cover everything but it seems to be working for me for now, since it simply forces all the "display" values to be in my own css file