The Tailwind CSS component library for Blazor

Accessible, themeable components for Blazor Server and WebAssembly. Ship polished UI without wrestling with CSS.

Install

dotnet add package twblazor

Why 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.

Tailwind and Blazor, working together

twblazor is a Blazor components library for teams who already use Tailwind CSS.

Tailwind CSS with Blazor How Tailwind finds your classes and how twblazor themes them. Why twblazor? MIT licensed, Tailwind native and styled in your own project. Install guide Add the package to a Server or WebAssembly app in nine steps.

Real components. Ready for your app.

Go ahead and try them. Every example here is a live twblazor component.

Sign in

Checkout stepper

Project settings

Manage how your team ships

Project name

Visibility

Private

Team

Public

Environment

Email alerts

Deploy on push

Storage used 7.2 of 10 GB

72%

Storage by folder7.2 GB across 10 folders

Release health

v2.4.0

Storage nearing capacity.

Deploys: 128
Failed: 3
Avg. time: 4m

Response time95th percentile, last 24 hours

Deploys per dayLast 14 days

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 has its own C# theme class, like TwButtonTheme, with every class exposed as a named property.

Reusable design tokens

Set a color or shade once and every component stays in sync.

Global defaults, local overrides

Set a default once, and any single instance can still override it.

Real Tailwind, real JIT

Themes are plain C# string literals, so Tailwind always sees them. No safelists or build workarounds.

CSHARP

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
    ]
});

See it in action

Five well-known looks, one component library

Each of these pages is the same twblazor components with a different Theme.cs. No component was changed and no CSS was overridden: the colors, corners, shadows, type and spacing all come from the theme file, which is shown in full on each page.

twblazor is not affiliated with, endorsed by or sponsored by Microsoft, Apple, the LEGO Group, Tesco or Trading 212. These are independent examples made to show what a custom theme can do, and are not those companies' websites. Product names, prices, offers and market data are illustrative, and nothing here is financial advice. Logos and pictures come from each company's own website and remain its property, and all trademarks belong to their owners.

Built in. No npm package, no JavaScript.

Tailwind class merging, built right in

Pass Class="px-3" to any component and it replaces the theme's px-6 instead of fighting it. twblazor ships its own C# port of tailwind-merge, so your class always wins and there is nothing to install or set up.

The last class wins Conflicts are settled by what you wrote last, not by the order of Tailwind's stylesheet.
Understands Tailwind v4 Variants, arbitrary values, the important modifier and prefixes, checked against tailwind-merge on more than 700 class strings.
Yours to configure Teach it your own utilities, set your Tailwind prefix or turn it off, all from AddTwBlazor.

See how class merging works

Theme: inline-flexitems-centerrounded-mdbg-purple-700~~Replaced: px-6~~py-2text-smfont-semiboldtext-white
Your Class: px-3

Rendered

inline-flex items-center rounded-md bg-purple-700 py-2 text-sm font-semibold text-white px-3

Save changes

25 languages, built in

Speaks your users' language, out of the box

Every label, placeholder, validation message and screen reader announcement comes from a resource file, and dates and times follow the culture your application runs under. Components pick the language up by themselves, with nothing to set up.

One .resx file per language English is built in and the rest ship in the package. Add or reword any string with resource files of your own.
Dates and times that fit Month names, the first day of the week and 12 or 24 hour time follow the culture, with British formats as the fallback.
Configured in AddTwBlazor Pin a culture, set a format or swap the localizer service, all from the options you already pass.

See how localization works

English English
中文（简体） Chinese, Simplified
Español Spanish
हिन्दी Hindi
Português Portuguese
বাংলা Bengali
Русский Russian
日本語 Japanese
پنجابی Western Punjabi
Türkçe Turkish
Tiếng Việt Vietnamese
中文（繁體） Chinese, Traditional
العربية Arabic
मराठी Marathi
తెలుగు Telugu
한국어 Korean
தமிழ் Tamil
اردو Urdu
Bahasa Indonesia Indonesian
Deutsch German
Français French
Basa Jawa Javanese
فارسی Persian
Italiano Italian
Polski Polish
and 15 more languages

Translations other than English were produced by AI and have not been reviewed by native speakers. Spotted something that could read better? Contribute a correction.

CSHARP

builder.Services.AddTwBlazor(options =>
{
    // Reword a string or add a language with your own .resx files.
    options.Localization.AddResource(MyStrings.ResourceManager);

    // Dates and times follow the culture. Set only what you want to change.
    options.Localization.Formats.FirstDayOfWeek = DayOfWeek.Monday;
    options.Localization.Formats.Use12HourClock = false;
}, Theme.CreateTheme);

Right to left, built in

Reads right to left, without a second stylesheet

Arabic, Hebrew, Persian and Urdu turn the whole layout around. Every component mirrors itself for those languages: spacing, icons, panels and the arrow keys all follow the direction of the text.

Follows the language A right to left culture mirrors every component by itself. Set the direction yourself to pin it.
Keys that match the screen Left and Right swap in tabs, trees, calendars and carousels, so each arrow still moves the way it points.
Mix directions on one page Wrap any part of a page in TwDirectionProvider to give it a direction of its own.

See how right to left works

Rendered

تم حفظ التغييرات.

الاسم

الإشعارات

Up and running in minutes

Install the package, register the services, start dropping in components.

HTML

<TwButton Label="Get Started" Color="Color.Primary" />
<TwAlert Color="Color.Success" Dense>Everything is working!</TwAlert>

Join the discussion on Discord

Ask questions, share what you're building and help shape what comes next.

Join the Discord

Ready to build something great?

Jump into the docs and start assembling your UI with twblazor components.

Get started Star on GitHub

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.