Fluent UI Blazor v5 (dev): Tailwind CSS compatibility and no-fuib-style

[sachith chowl (sachithchowl)]

I'm using Fluent UI Blazor v5 (dev-5) with Tailwind CSS and have encountered a few issues compared with v4.

In v4, I could configure class-name validation using:

services.AddFluentUIComponents(options =>
{
    options.ValidateClassNames = false;
});

In v5, this configuration no longer seems to work or is no longer available.

I also tried using the no-fuib-style class, but it appears to remove padding, whereas I expected it to remove margins or let me control spacing entirely through Tailwind CSS.

My questions:

1. Has ValidateClassNames been removed or replaced in Fluent UI Blazor v5?
2. What is the recommended way to use Tailwind utility classes such as px-4, mx-auto, and mt-2 with Fluent UI components?
3. What exactly does no-fuib-style disable? Why does it affect padding but not margin as expected?
4. Is there a recommended approach for preventing style conflicts between Fluent UI and Tailwind CSS without losing component functionality?

I'd appreciate any guidance or examples from developers who have successfully integrated Fluent UI Blazor v5 with Tailwind CSS.

[Kurt Geminic (kgeminicdev)]

ValidateClassNames still exists in v5. It moved to LibraryConfiguration in #5149 and shipped in 5.0.0. If it doesn't compile for you, you're on an earlier dev-v5 build, so update to 5.0.x.

builder.Services.AddFluentUIComponents(options =>
{
    options.ValidateClassNames = false;
});

It's stored statically, so it applies to the whole app.

Plain Tailwind utilities don't need it. With validation on, CssBuilder silently drops any class that doesn't match ^-?[_a-zA-Z]+[_a-zA-Z0-9-]*$. So px-4, mx-auto and mt-2 pass. md:px-4, hover:bg-gray-100, w-1/2, px-2.5 and mt-[3px] get removed. If you use variants or arbitrary values, turn validation off.

no-fuib-style on <body> only removes default-fuib.css. That's a small normalize sheet with:

• margin: 0; padding: 0; height: 100dvh; overflow: hidden on body
• box-sizing: border-box on *
• heading sizes and margins, link colors
• padding on table td, table th

That table cell padding is most likely the padding you saw disappear. The attribute doesn't touch the components' own styling, so it won't let you control component spacing. Margins on a component come from whatever classes you put on it.

Tailwind's preflight and default-fuib.css both reset the same base elements. Keeping both, or dropping one, mostly comes down to which base styles you want. The docs warn that components aren't guaranteed to render correctly without the default sheet.