MudBlazor with LumexUI

[tobyloki]

I'm in the process of migrating some components from MudBlazor to LumexUI, however some LumexUI components don't show up on correctly like the LumexButton & LumexDropdown. The main cause of the styling problem is caused by Mudblazor's <link href="@Assets["_content/MudBlazor/MudBlazor.min.css"]" rel="stylesheet" /> in App.razor which conflicts with the LumexUI tailwind generated css file <link rel="stylesheet" href="@Assets["css/tw.css"]"/>. How can I fix this so I can still use MudBlazor and LumexUI together?

[desmondinho]

Hey @tobyloki,

Thank you for asking this important question!

Tailwind CSS supports prefixing for both generated utility classes and CSS variables exactly for cases like this one.

You simply need to add the prefix in your main CSS file.

https://tailwindcss.com/docs/styling-with-utility-classes#using-the-prefix-option

[tobyloki]

So I have this

@import "tailwindcss" prefix(tw);
@import "../bin/lumexui/theme"; /* Lumex base theme */
@source "../bin/lumexui/*.cs"; /* Lumex generated utilities */

but how do I tell the LumexUI css to use the prefix. Right now I get this error:

43>EXEC: Error : Cannot apply unprefixed utility class text-foreground. Did you mean tw:text-foreground?

[desmondinho]

My bad. My brain lagged and I said some nonsense.

I am not sure what exactly should be done, but you could try applying an important modifier to Tailwind generated classes globally.

https://tailwindcss.com/docs/styling-with-utility-classes#using-the-important-flag

Also, make sure that Tailwind styles go after MudBlazor ones.