TailwindVariants.NET 0.2.8

TailwindVariants.NET

TailwindVariants.NET is a strongly typed Blazor library for managing TailwindCSS variants and slot-based styling.

⚠️ This package is not related to tailwind-variants — it only draws inspiration from its ideas and applies them to a strongly typed, Blazor-first API.

✨ Features

• Strongly typed variant definitions for Blazor components (with or without slots).
• Default classes for slots + variants, and slot-aware compound variants.
• Generated slot accessors for convenient, strongly typed access to slot classes (b => b.Base automatically wrapped).
• Simple API builder (Variants<TOwner, TSlots>).
• Integration with TailwindMerge.NET to resolve conflicts between Tailwind classes.
• Lightweight, no JS runtime dependencies (pure Blazor/C#).
• Incremental source generator (TailwindVariants.SourceGenerators) for generating strongly typed slot accessors.
• Supports .NET 8, .NET 9, and .NET Standard 2.0 (source generator only).
• Works seamlessly in Blazor projects (Server, WebAssembly, Hybrid).

Installation

Install from NuGet:

dotnet add package TailwindVariants.NET

To enable automatic generation of slot accessors, it's included an analyzer with the main package.

The package supports:

• >= .NET 8

Quick Example

using TailwindVariants.NET;

public partial class Button : ISlottable<Button.Slots>
{
    private static readonly TvDescriptor<Button, Slots> _button = new
    (
        @base: "font-semibold border rounded",
        variants: new()
        {
            [b => b.Variant] = new Variant<Variants, Slots>()
            {
                [Variants.Primary] = "bg-blue-500 text-white border-transparent",
                [Variants.Secondary] = "bg-white text-gray-800 border-gray-400",
            },
            [b => b.Size] = new Variant<Sizes, Slots>()
            {
              [Sizes.Small] = "text-sm py-1 px-2",
              [Sizes.Medium] = "text-base py-2 px-4",
            },
        }
        compoundVariants: 
        [
            new(b => b.Variant == Variants.Primary && !b.Disabled)
            {
                Class = "hover:bg-blue-600"
            }
        ]
    );

    protected override void OnParametersSet()
    {
        _slots = Tv.Invoke(this, _button);
    }

    protected override TvDescriptor<Button, Slots> GetDescriptor() => _button;

    public sealed partial class Slots : ISlots
    {
        public string? Base { get; set; }
    }

    // ... enums omitted for brevity ...
}

In the component:

@inherits TwComponentBase<Button, Button.Slots>

<button class="@_slots.GetBase()" disabled="@Disabled">
  @ChildContent
</button>

@code
{
    [Parameter]
    public RenderFragment? ChildContent { get; set; }
    
    [Parameter]
    public Slots? Classes { get; set; }
    
    [Parameter]
    public Variants Variant { get; set; }
    
    [Parameter]
    public Sizes Size { get; set; }
    
    [Parameter]
    public bool Disabled { get; set; }
}

Slot Access

With generated slot accessors (via the source generator), you no longer need to write _slots[b => b.Avatar] manually. You can use strongly typed properties:

<img class="@_slots.GetBase()" src="avatar.png" />
<p class="@_slots.GetDescription()">Description text</p>

This is enabled by the incremental source generator (TailwindVariants.SourceGenerators), which automatically generates accessors for each component that implements ISlots.

Documentation

Go to the documentation for the full explanation of the example

Acknowledgements / Credits

Special thanks to the authors of the following projects that are either used or inspired this work:

• tailwind-variants (jrgarciadev) — for the general concept of variants & compound variants.
• tailwind-merge-dotnet (desmondinho) — Tailwind class merge utilities.

Check out those projects for more tools and context.

Contributing

Contributions are always welcome!

Please follow our contributing guidelines.

Please adhere to this project's CODE_OF_CONDUCT.

License

MIT — see the LICENSE file in the repository.

Repository & Issues

If you encounter problems or have feature requests, open an issue on the GitHub repository.