Tailwind CSS is not compatible with FAST Blazor

[neoix]

Hi floks,

I have a web app which is built using Blazor WASM and Tailwind CSS. I really like FAST Blazor components and wanted to use them instead of building my own components or using 3rd parties. However, when adding the FluentUI library as per the docs, I observed many issues related to the styling, either FAST Blazor doesn't behave correctly (eg. Animation color on Text Field when focus is happened) or my existing web app loses some stylings (Seems like an overlap between both css being generated by Tailwind & FluentUI).

I thought that the styling in FAST Blazor are isolated per component (Shadow DOM) so it should not be interfered with an existing CSS library (eg. Tailwind)

Have you experienced the same?

[vnbaaij]

Hi @neoix, please take a look at what we're adding for the next major version (https://baaijte.net/blog/microsoft-fluentui-blazor-3.0/). Would you feel that is sufficient to not need Tailwind anymore? If not, what's missing?

[neoix]

Apologize for my delayed answer. I have actually tested again Tailwind along with the new Blazor Fluent UI and it looks all good. I also liked very much the layout components that are part of the incubation labs, very cool stuff @vnbaaij

[alabhary]

@neoix can you please share your experience on how you have them works fine together?

[StevenTCramer]

@alabhary I have them working together also but it is a bit tricky you have to get all the css loaded in proper orders.

https://github.com/TimeWarpEngineering/timewarp-architecture/tree/master/TimeWarp.Architecture/Source/ContainerApps/Web/Web.Spa

Look at csproj and tailwind config and wwwroot/css/Fluent.css

[neoix]

@neoix can you please share your experience on how you have them works fine together?

I'd recommend to add this on your tailwind.config.json

corePlugins: {
  preflight: false,
}

[alabhary]

I can’t thank is you enough Best Mohamed

…

On Tue, 28 May 2024 at 3:03 AM, Steven T. Cramer ***@***.***> wrote: @alabhary <https://github.com/alabhary> I have them working together also but it is a bit tricky you have to get all the css loaded in proper orders. https://github.com/TimeWarpEngineering/timewarp-architecture/tree/master/TimeWarp.Architecture/Source/ContainerApps/Web/Web.Spa Look at csproj and tailwind config and wwwroot/css/Fluent.css — Reply to this email directly, view it on GitHub <#345 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AZFLMZAPJEYZWRTHNC3JVIDZEPQX7AVCNFSM6AAAAAAV5N44DWVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TKNZVGA2TE> . You are receiving this because you were mentioned.Message ID: ***@***.*** com>

[coderdnewbie]

It is possible to tailwind to fluentui and I have got the theming working so I can use tailwind with fluentui themes.

I will try to produce a demo website once dotnet 9.0 and tailwind v4 is out at the end of the year.

Here is a screenshot of theming working with Tailwind.

Here I changed the theme and it reflected correctly in Tailwind code as well (The shadow color around the Tailwind 'Fruit of the world' card.