Blazor FluentUI and Tailwind conflicting classes.

[StevenTCramer]

I created a simple Blazor app using dotnet new fluentblazorwasm --name Wasm01

I copied in sample code from the demos. And I get the following screen shot.

I then add tailwind cdn to my index.html

<script src="https://cdn.tailwindcss.com"></script>

and re-run.

Upon investigation, I found a conflicting outline class.

I can confirm there is a conflict by using a prefix on my tailwind config as

    <script>
        tailwind.config = {
            prefix: 'tw-',
        }
    </script>

Then it renders normally again but I really don't want to use a prefix, is there a way to find out all the css classes that conflict? And work around this some other way?

[vnbaaij]

I don't think there is a way to find conflicting class names. It is probably unavoidable to not get colissions when using CSS from different vendors/providers/frameworks but in this caseI find it strange.
The web components use the shadow dom extensively and we tend to use CSS isolation whenever possible so that helps to minimize the 'colission surface' but when both use something generic as outline that falls apart pretty quickly. I'm afraid using a prefix is the only way out.

[StevenTCramer]

Thanks for the reply. I think if you start a fresh site and only pull in the classes as you use them one might see which ones have conflicts. But if you pull in the whole thing at once (like the CDN) then the prefix is probably best.

If I find out more as I go, I will update. Thanks again.