Installation

Pick the package for your hosting model, wire FluentCss up once and start composing styles.

Choose a package

There is one integration package per hosting model. Install the one that matches your app. You never install FluentCss.Core yourself.

Package	Hosting model	What it gives you
`FluentCss.Blazor`	Blazor	The `CssStyles` component and the preflight stylesheet. Use it for Blazor static SSR, Blazor Server (interactive server) and Blazor WebAssembly (standalone).
`FluentCss.MvcRazor`	ASP.NET Core MVC and Razor Pages	The `<fluent-css />` tag helper, the stylesheet middleware and the preflight stylesheet.

FluentCss.Core comes with them

Both integration packages depend on FluentCss.Core and bring it in automatically. That is where the builder, the registry and every utility live, and it is a transitive dependency: do not add it to your project on its own.

Blazor

Add the Blazor package:

dotnet add package FluentCss.Blazor

For the shortest syntax add the following to your _Imports.razor. Importing the static builder means you can start a chain with Css or Dark directly.

@using static FluentCss.Core.FluentCssBuilder
@using FluentCss.Core

Drop the CssStyles component into your layout. It renders a <style> block with every class registered while the page is built.

<!-- MainLayout.razor -->
@inherits LayoutComponentBase

<header>...</header>
<main>@Body</main>

<FluentCss.Blazor.CssStyles />

Placement matters

Put CssStyles near the end of the layout, after the page content. Utilities are registered while the page renders, so if the component runs too early the stylesheet will be incomplete on the first response.

Optionally include the Tailwind preflight reset to normalize browser defaults such as margins, borders and fonts:

<link rel="stylesheet" href="_content/FluentCss.Blazor/preflight.css" />

MVC and Razor Pages

Add the MVC/Razor Pages package:

dotnet add package FluentCss.MvcRazor

Register the middleware in Program.cs. It serves the current hash at /fluentcss/hash and the stylesheet at /fluentcss/{hash}.css, with gzip and an ETag.

var app = builder.Build();

app.UseRouting();
app.UseFluentCssMvcRazor();   // serve /fluentcss/hash and /fluentcss/{hash}.css
app.UseAuthorization();

app.MapStaticAssets();
app.MapControllerRoute("default", "{controller=Home}/{action=Index}/{id?}");

Razor Pages apps map their pages instead with app.MapRazorPages(); the middleware and the tag helper are identical for both models.

@using static FluentCss.Core.FluentCssBuilder
@using FluentCss.Core
@addTagHelper *, FluentCss.MvcRazor

Finally add the tag helper and the preflight stylesheet to your layout. The tag helper renders the stylesheet <link> and a small script that keeps it in sync after client-side DOM changes, such as a partial view loaded over AJAX.

<head>
    ...
    <link rel="stylesheet" href="/_content/FluentCss.MvcRazor/preflight.css" />
    <fluent-css />
</head>

You do not manage the hash

The tag helper resolves the current hash when the layout renders, but classes can still be registered after that point. The injected script re-reads /fluentcss/hash on load and watches the document for later changes, swapping the stylesheet when it changes.

Client-side interactivity (work in progress)

Not supported yet

A Blazor Web App using the Interactive WebAssembly or Auto render mode registers classes on the client, which is not supported yet. Static SSR, standalone Blazor WebAssembly and Blazor Server (interactive server) are supported today with FluentCss.Blazor.

Any other .NET project

Outside of Blazor and MVC/Razor Pages there is no integration package, so add the core library directly:

dotnet add package FluentCss.Core

You can then build classes and read the generated CSS from any .NET application. ToString() returns the space separated class names for your class attribute, while ClassRegistry.DefaultRegistry.Css gives you the stylesheet.

using FluentCss.Core;

var classes = FluentCssBuilder.Css
    .Background(Color.Emerald500)
    .Color(Color.White)
    .Px(6)
    .Py(3)
    .RoundedMd();

// "bg-emerald-500 text-white px-6 py-3 rounded-md"
string classAttr = classes.ToString();

// The complete, deduplicated stylesheet
string css = ClassRegistry.DefaultRegistry.Css;

Next, read How it works to understand what happens behind the scenes.