FluentUI components rendering in a Tailwind app

[ngruson]

I'm trying to use the Fluent UI components in a Blazor Server app that also uses Tailwind for styling.
For example, the FluentPersona component is not being rendered as I would expect:

In a new Blazor Server app (without Tailwind), it is being rendered correctly.

Probably the styles of the component are being messed up by Tailwind?
How should I approach this?

[coderdnewbie]

I have tailwind and fluent ui working (including getting tailwind to use the fluentUI themes), but it is quite an involved process.

Looking at the question (as I do not have access to your code), I suggest two things that may help you.

(1) Use the tailwind prefix tw- feature by fixing the tailwind config file, which will ensure that there is no css clashing going on. However all the tailwind classes will then need to start with tw-, for example tw-py-4 instead of py-4 etc

Here is an example of my working code:

<div class="tw-relative tw-mx-auto tw-max-w-md tw-rounded-lg tw-bg-gradient-to-tr tw-from-pink-300 tw-to-blue-300 tw-p-0.5 tw-shadow-md tw-shadow-pink-400">
    <div class="tw-bg-fl-neutral-fill-rest tw-p-7 tw-rounded-md">
        <p class="tw-font-bold tw-text-xl tw-mb-2">Border gradient example</p>
        <p>Create beautiful cards with gradient tw-borders with Tailwind CSS.</p>
    </div>
</div>

(2) Investigate the fluentui reboot.css, which resets the styles. the command is @import '/_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css'; as this could be resetting your tailwind styles. See https://www.fluentui-blazor.net/Reboot.

I have this all working, so it is all possible. It just depends how you have set things up in your project.

Hope these suggestions help you progress in what you are attempting.

Below, is an example of above tailwind working, and demonstrating that the tailwind gradient colors work.

[ngruson]

Thanks @coderdnewbie, I've got it working now.
I had to enable this line in App.razor:

<link href="{PROJECT_NAME}.styles.css" rel="stylesheet" />

Now the Fluent UI components are rendered correctly.

[coderdnewbie]

Great news, FluentUI and Tailwind work together well.