Tailwind CSS with Blazor

Why Tailwind with Blazor?

Tailwind CSS is a utility-first CSS framework: you style elements with small single-purpose classes such as px-4 or bg-purple-600 instead of writing stylesheets. Blazor renders Razor markup, so those classes sit directly in your components and your design lives next to the markup that uses it.

The catch is that Tailwind only generates the classes it can find as literal text in your source files. That matters the moment a component library is involved, because Tailwind cannot read the classes compiled into a NuGet package's DLL.

How Tailwind finds your classes

Tailwind scans the files you point it at with @source directives and generates CSS for every class name it finds. In a Blazor project that means your .razor files and any C# file that holds class names.

@import "tailwindcss";

@source "../../**/*.razor";
@source "../../Theme.cs";

Run the Tailwind CLI against that input file to produce output.css, then link it from App.razor (Blazor Server and Web App) or index.html (standalone WebAssembly). Nothing about Tailwind needs a Node server at runtime, only at build time.

How twblazor handles the DLL problem

twblazor is a Tailwind Blazor component library, so it solves the problem above directly. Every class a component uses is declared as a literal string in a Theme.cs file that lives in your project. Your Tailwind build scans that file alongside your Razor files and produces one stylesheet containing everything.

builder.Services.AddTwBlazor(_ => { }, Theme.CreateDefaultTheme);

Because the classes are plain C# strings in your own code, you can change a component's look by editing one property, with no CSS overrides and no !important. The Theme builder generates a Theme.cs with your brand colors and only the components you use.

Dark mode and accessibility

Every twblazor component ships with dark: variants, so dark mode works as soon as your app toggles the dark class on the root element. Components also include ARIA attributes and keyboard support, which you would otherwise have to build and test yourself.

Browse the button, textfield, data table and color picker pages to see live examples and the theme properties each one exposes.

Next steps

• Follow the Get started guide to install twblazor in a Blazor Server or WebAssembly app.
• Create your own palette with the Theme builder.
• Read the Why twblazor? page to see what sets it apart.

Frequently asked questions