twblazor
Professional-grade Tailwind CSS components for modern Blazor development. Ship polished, accessible UI without wrestling with CSS.
dotnet add package twblazorWhy twblazor?
Everything you need to build clean, consistent interfaces.
Fast to build
25+ ready-made components mean you're shipping features, not fighting CSS.
Fully customisable
Tailwind-powered styling that adapts to your brand, in light and dark mode.
Composable
Simple, parameter-driven APIs that feel natural if you already know Blazor.
Accessible by default
Sensible ARIA attributes and keyboard support baked into every component.
See it in action
A small taste of the components in the library.
Buttons
Alerts
Chips
Forms
Tabs
Everything at a glance, built for content-heavy dashboards.
The deepest Tailwind theming of any Blazor library
twblazor is the first and only Tailwind CSS component library for Blazor built around full, typed, component-level theming. Every visual detail of every component is a plain Tailwind class you own and can override, not a black box baked into a compiled DLL.
Every class, typed and overridable
Each component ships a dedicated C# theme class, TwButtonTheme, TwCardTheme, TwInputTheme and more, exposing every background, border, hover and disabled-state class as a named, IntelliSense-discoverable property.
Reusable design tokens
Shared palettes for surfaces, borders, hover states and text tones mean you set a colour or shade once and every component stays in sync, with no hunting down the same class scattered across the theme.
Global defaults, local overrides
Set a default once like your app's input style and every component picks it up automatically, while any single instance can still opt out and override it.
Real Tailwind, real JIT
Themes are plain C# string literals, not classes assembled at runtime, so Tailwind's compiler can always see them, with no purge lists, safelists, or build workarounds.
builder.Services.AddTwBlazor(_ => { }, () => new TwBlazorTheme
{
// ...position, colors, shadows, rounded...
Components =
[
new TwButtonTheme
{
Base = "inline-flex items-center gap-2 rounded-full font-semibold",
Padding = "px-8"
},
new TwInputTheme
{
DefaultInputVariant = InputVariant.Outlined
}
// ...every other component you use
]
});Up and running in minutes
Install the package, register the services, start dropping in components.
<TwButton Label="Get Started" Color="Color.Primary" />
<TwAlert Color="Color.Success" Dense>Everything is working!</TwAlert>Ready to build something great?
Jump into the docs and start assembling your UI with twblazor components.
twblazor is and always will be free and open source. We believe great tooling should be accessible to every developer, so the library is released under the MIT license and built in the open, with contributions from the community.