I have a Razor Class Library that is using TailWind CSS. The library is being consumed by a Blazor Web App. Both projects are .NET9. When I load a component from the RCL in the consuming Web App project, the first component can use the TailWind css but subsequent components do not. For example, here's a call for a button in a secondary component of the RCL,
<button class="mb-2 h-9 w-35 rounded bg-gray-300 px-3 py-2 text-sm text-black hover:text-white hover:bg-blue-700">Add New Record</button>and in the browser developer tools, it shows this for that control
bootstrap.css:493 [type="button"]:not(:disabled), [type="reset"]:not(:disabled), [type="submit"]:not(:disabled), button:not(:disabled) { cursor: pointer; }With all but the last "button:not" references stroked through. There's no reference to the tailwind.css file at all. In my consuming project's app.razor file, the CSS files are linked in the correct order, i.e.,
<link rel="stylesheet" href="@Assets["lib/bootstrap/dist/css/bootstrap.min.css"]" /><link rel="stylesheet" href="_content/RCLibrary/tailwind.css" />It's not only buttons where the CSS is not applying. Grids have the same issue, as do fonts, input tags and other elements have the same issues. As soon as I comment out the Bootstrap link reference in the App.razor all the TailWind css work correctly. For example, the same button control above looks like this in the browser developer tools
tailwind.css:350layer utilities { .hover\:text-white {&:hover { @media (hover: hover) { { color: var(--color-white); } } } }}tailwind.css:349@layer utilities { .hover\:text-white {&:hover { } }}tailwind.css:343@layer utilities { .hover\:bg-blue-700 {&:hover { @media (hover: hover) { { background-color: var(--color-blue-700); } } } }}.....And all this only fails on subsequent components in the RCL. In the first component, buttons, input tags and everything seem to work correctly getting the tailwind css as expected. I'm quite at a loss to solve this. I have no control over if the consuming projects for this RCL are going to use Bootstrap or not. Whether they do or not my RCL has to display as designed. I hope someone has some suggestions.