BlazorTw 0.1.0

BlazorTw

Tailwind CSS — typed, composable, and native to .NET.

BlazorTw is a lightweight enhancement layer for Tailwind CSS in Blazor. It brings the full power of Tailwind into the C# type system, providing IntelliSense, compile-time safety, and composable class sets — without abstracting CSS away or adding runtime overhead.

Note: This package was created with the assistance of AI (JetBrains Junie / Claude).

Why BlazorTw?

BlazorTw doesn't replace Tailwind; it makes it feel native to the .NET ecosystem. Instead of typing strings and hoping for the best, you get a discoverable API that mirrors Tailwind's naming conventions perfectly.

• Stop Memorizing: Use IntelliSense to browse spacing scales, color palettes, and utility groups.
• Refactor with Confidence: Typed utilities mean you can use standard IDE tools to find usages and refactor styles.
• Zero Runtime Cost: Everything is resolved at compile time. Fully compatible with AOT and Trimming (Blazor WASM).
• Tailwind v4 Ready: Built specifically for the CSS-first future of Tailwind v4.

Installation

dotnet add package BlazorTw

For Tailwind v4 @theme sync (custom tokens → typed API), also add:

dotnet add package BlazorTw.Generators

Basic Usage

Combine utilities using the + operator. Intuitive, readable, and type-safe.

@using BlazorTw

<div class="@(Tw.Flex + Tw.Items.Center + Tw.Gap._4 + Tw.P._6 + Tw.Bg.Slate._100 + Tw.Rounded.Xl)">
    <div class="@(Tw.Size._12 + Tw.Bg.Blue._500 + Tw.Rounded.Full)" />
    <div>
        <h3 class="@(Tw.Text.Lg + Tw.Font.Semibold + Tw.Text.Slate._900)">Typed Tailwind</h3>
        <p class="@(Tw.Text.Sm + Tw.Text.Slate._600)">No more typos in your class strings.</p>
    </div>
</div>

Responsive & State Variants

// Hover and focus states
var style = Tw.Hover.Bg.Blue._600 + Tw.Focus.Ring._2;

// Responsive layouts
var layout = Tw.Flex + Tw.FlexCol + Tw.Md.FlexRow + Tw.Md.Items.Center;

// Dark mode
var dark = Tw.Dark.Bg.Gray._900 + Tw.Dark.Text.White;

// All 10 variants: Hover, Focus, Active, Disabled, Dark, Sm, Md, Lg, Xl, Xl2

Reusable Design Systems

Define styles as static readonly fields — evaluated once at startup, zero per-render cost.

public static class Theme
{
    public static readonly ClassSet Card =
        Tw.Bg.White + Tw.Rounded.Lg + Tw.Shadow.Md + Tw.P._4 + Tw.Border + Tw.BorderColor.Slate._200;

    public static readonly ClassSet ButtonPrimary =
        Tw.Px._4 + Tw.Py._2 + Tw.Bg.Blue._600 + Tw.Text.White + Tw.Rounded.Md +
        Tw.Hover.Bg.Blue._700 + Tw.Transition.Colors;
}

<button class="@Theme.ButtonPrimary">Click me</button>

Arbitrary Values & Raw Escape Hatch

// Arbitrary values — first-class citizens
var w = Tw.W["37px"];                    // w-[37px]
var grid = Tw.GridCols["1fr_500px_2fr"]; // grid-cols-[1fr_500px_2fr]

// Raw escape hatch — you are never blocked
var raw = Tw.Raw("supports-[display:grid]:grid");

Tailwind CSS Setup

Enable generated file emission so Tailwind's scanner can detect all used classes:

<PropertyGroup>
  <EmitCompilerGeneratedFiles>true</EmitCompilerGeneratedFiles>
</PropertyGroup>

Add @source directives to your app.css:

@import "tailwindcss";
@source "../../BlazorTw.Core/**/*.cs";
@source "../../BlazorTw.Core/obj/**/*.g.cs";
@source "../obj/**/*.g.cs";
@source "../Components/**/*.razor";

Run Tailwind CLI after compile:

<Target Name="TailwindBuild" AfterTargets="Compile">
  <Exec Command="npx @tailwindcss/cli -i ./Styles/app.css -o ./wwwroot/app.css" />
</Target>

Related Packages

License

MIT © Pascal Vorwerk