Getting Started

TailwindBlazor integrates Tailwind CSS v4 into your Blazor app with zero external dependencies. No Node.js, no npm, no manual CLI installs.

$ dotnet new install TailwindBlazor.Templates
$ dotnet new blazor-tailwind -n MyApp
$ cd MyApp && dotnet run

Or add to an existing project

1. Install the package

$ dotnet add package TailwindBlazor

2. Create the CSS entry point

Create a file at Styles/app.css in your project root:

@import "tailwindcss";

3. Register the service

Add one line to your Program.cs:

using TailwindBlazor;

var builder = WebApplication.CreateBuilder(args);
builder.UseTailwind();

4. Reference the generated CSS

Add the stylesheet link in your App.razor or _Host.cshtml:

<link rel="stylesheet" href="css/tailwind.css" />

5. Use Tailwind classes

<h1 class="text-3xl font-bold text-gray-900">
    Hello, TailwindBlazor!
</h1>

Configuration

TailwindBlazor works out of the box with sensible defaults. Everything is overridable through MSBuild properties, C# options, or appsettings.json.

<PropertyGroup>
  <TailwindVersion>4.1.18</TailwindVersion>
  <TailwindInputFile>Styles/app.css</TailwindInputFile>
  <TailwindOutputFile>wwwroot/css/tailwind.css</TailwindOutputFile>
  <TailwindEnabled>true</TailwindEnabled>
  <TailwindMinify>false</TailwindMinify>
</PropertyGroup>

builder.UseTailwind(options =>
{
    options.InputFile = "Styles/app.css";
    options.OutputFile = "wwwroot/css/tailwind.css";
    options.CliPath = "/custom/path/to/tailwindcss";
    options.TailwindVersion = "4.1.18";
});

{
  "Tailwind": {
    "InputFile": "Styles/app.css",
    "OutputFile": "wwwroot/css/tailwind.css",
    "TailwindVersion": "4.1.18"
  }
}

How It Works

Supported Platforms

The correct CLI binary is resolved automatically based on your OS and CPU architecture.

Troubleshooting