Zero-config Tailwind CSS integration for ASP.NET Core. Auto-installs the standalone CLI, watches for changes in development, and builds optimized CSS for production. Supports Tailwind v3 LTS and v4 stable. No Node.js required.
The simplest way to add Tailwind CSS to your ASP.NET Core application without the complexity of Node.js tooling.
Just add the NuGet package and call AddTailbreeze(). The CLI is auto-downloaded, config files are auto-generated, and hot reload just works.
Automatically watches your .cshtml and .razor files for changes and rebuilds CSS instantly. See your Tailwind changes without refreshing.
Minified, tree-shaken CSS at build time via MSBuild integration. Only the classes you use end up in your final bundle.
Add Tailwind CSS to your ASP.NET Core app with just two packages and three lines of code.
Requires @addTagHelper *, Tailbreeze in _ViewImports.cshtml
using Tailbreeze.Extensions;
var builder = WebApplication.CreateBuilder(args);
// Tailwind CSS (Noundry.Tailbreeze)
builder.Services.AddTailbreeze(options =>
{
options.TailwindVersion = "4";
options.InputCssPath = "Styles/app.css";
options.OutputCssPath = "css/app.css";
options.EnableHotReload = builder.Environment.IsDevelopment();
});
// ... other services
var app = builder.Build();
app.UseStaticFiles();
app.UseTailbreeze();
// ... other middleware
app.Run();
// Tailbreeze will:
// - Auto-download the Tailwind v4 CLI
// - Watch for changes & hot-reload in dev
// - Build minified CSS for productionWhile Tailbreeze works with zero configuration, you can customize every aspect via appsettings.json or code.
{
"Tailbreeze": {
"Mode": "Cdn",
"TailwindVersion": "latest",
"InputCssPath": "Styles/app.css",
"OutputCssPath": "css/app.css",
"ConfigPath": "tailwind.config.js",
"ServePath": "/tailbreeze/app.css",
"ServeViaMiddleware": true,
"EnableHotReload": true,
"AutoInstallCli": true,
"MinifyCss": null,
"AutoDetectComponentLibraries": true,
"ContentPaths": [
"./Pages/**/*.cshtml",
"./Views/**/*.cshtml"
],
"UseCdnFallback": null,
"CliStartupTimeoutSeconds": 60
}
}Cdn (CDN in dev, optimized in prod), Full (~300KB, no tree-shaking), or Optimized (CLI-based). Default: Cdn
"latest" (v4), "4", "3" (v3.4.17 LTS), or specific like "4.0.0"
Source CSS with @import "tailwindcss" (v4) or @tailwind directives (v3). Default: "Styles/app.css"
Compiled CSS output relative to wwwroot. Default: "css/app.css"
Tailwind config file relative to project root. Default: "tailwind.config.js"
Route path for serving generated CSS. Must start with '/'. Default: "/tailbreeze/app.css"
Serve CSS through middleware instead of static files. Default: true
Watch mode in development. Default: true
null = auto (false in dev, true in production). Default: null
Automatically install Tailwind CLI if not found. Default: true
Scan for JSON class files (e.g., noundry-ui-classes.json) to include in safelist. Default: true
Explicit paths to component library JSON class files when auto-detection isn't enough. Default: []
Paths to scan for Tailwind classes. Empty = auto-detect by project type. Default: []
Extra CLI arguments passed to Tailwind. Default: null
Fall back to CDN if CLI fails. null = auto (true in dev, false in prod). Default: null
Custom CLI download URL with {os}, {arch} placeholders (air-gapped envs). Default: null
CLI startup timeout. Min: 10. Default: 60
Tailbreeze works seamlessly with Razor Pages, MVC, and Blazor applications.
<!DOCTYPE html>
<html lang="en" class="h-full bg-white/[0.02]">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<tailwind-link />
<title>@ViewData["Title"]</title>
</head>
<body class="h-full">
<div class="min-h-full" x-data="{ sidebarOpen: false }">
<!-- Sidebar navigation -->
<partial name="_SidebarNav" />
<main class="lg:pl-64">
@RenderBody()
</main>
</div>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs"></script>
</body>
</html>From the NoundryStarter template
@page
@model DashboardModel
<div class="px-4 sm:px-6 lg:px-8 py-8">
<h1 class="text-2xl font-semibold text-white">
Dashboard
</h1>
<!-- Noundry.UI components with Tailwind -->
<div class="grid md:grid-cols-3 gap-6 mt-6">
<noundry-stat-card
label="Total Customers"
value="@Model.TotalCustomers"
variant="primary" />
<noundry-stat-card
label="Active"
value="@Model.ActiveCount"
variant="success" />
</div>
<noundry-card class="mt-6">
<noundry-table striped hoverable>
<!-- ... -->
</noundry-table>
</noundry-card>
</div><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
<link rel="stylesheet" href="/tailbreeze/app.css" />
<HeadOutlet />
</head>
<body class="bg-white/[0.02] min-h-screen">
<Routes />
<script src="_framework/blazor.web.js"></script>
</body>
</html>@page "/"
<div class="max-w-4xl mx-auto p-8">
<h1 class="text-4xl font-bold text-white mb-6">
Blazor + Tailwind
</h1>
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-white/[0.02] rounded-xl shadow p-6">
<h2 class="text-xl font-semibold mb-2">Card 1</h2>
<p class="text-zinc-500">Content here</p>
</div>
<div class="bg-white/[0.02] rounded-xl shadow p-6">
<h2 class="text-xl font-semibold mb-2">Card 2</h2>
<p class="text-zinc-500">Content here</p>
</div>
</div>
</div><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
<link rel="stylesheet" href="css/app.css" />
<title>Blazor WASM App</title>
</head>
<body class="bg-white/[0.02]">
<div id="app">Loading...</div>
<script src="_framework/blazor.webassembly.js"></script>
</body>
</html>
<!-- Note: For standalone WASM, run Tailwind CLI
during build with Tailbreeze.Build package --><!-- .csproj -->
<ItemGroup>
<PackageReference Include="Noundry.Tailbreeze.Build"
Version="1.3.0" />
</ItemGroup>
<!-- Tailbreeze.Build automatically:
- Downloads Tailwind CLI at build time
- Compiles CSS during dotnet build
- Minifies CSS during dotnet publish
- No runtime overhead in WASM apps -->
# Build commands
$ dotnet build # CSS compiled
$ dotnet publish # CSS minifiedTailbreeze uses the official Tailwind CSS standalone CLI - no Node.js required.
On first run, Tailbreeze downloads the Tailwind standalone CLI from GitHub. Platform-specific binary (Windows, macOS, Linux).
In development, runs CLI in watch mode. Detects changes to .cshtml/.razor files and rebuilds CSS instantly.
MSBuild tasks compile and minify CSS during dotnet build/publish. Production CSS is tree-shaken and optimized.
dotnet run
│
├── TailwindHostedService starts
│ ├── Downloads CLI (if needed)
│ ├── Creates tailwind.config.js (if needed)
│ ├── Creates Styles/app.css (if needed)
│ └── Starts CLI in watch mode
│
├── TailwindMiddleware serves CSS
│ └── GET /tailbreeze/app.css → wwwroot/css/app.css
│
└── File change detected
└── CLI rebuilds CSS automatically
└── Browser refresh shows changes
dotnet publish
│
└── Tailbreeze.Build MSBuild task
├── Downloads CLI (if needed)
├── Runs: tailwindcss --minify
└── Output: wwwroot/css/app.css (minified)Tailbreeze includes features for enterprise deployments and special requirements.
Host the CLI on your own server for environments without internet access.
{
"Tailbreeze": {
"AutoInstallCli": true,
"CliDownloadUrl": "https://internal-mirror.example.com/tailwindcss-{os}-{arch}{extension}"
}
}
// Placeholders:
// {os} = windows, macos, linux
// {arch} = x64, arm64
// {extension} = .exe (Windows) or emptyDisable auto-download and use a CLI already installed on the system.
{
"Tailbreeze": {
"AutoInstallCli": false
}
}
// Ensure tailwindcss is in PATH or
// installed in the project directory
# Download manually:
$ curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-windows-x64.exeConfigure Tailbreeze programmatically for dynamic scenarios.
builder.Services.AddTailbreeze(options =>
{
options.TailwindVersion = "4";
options.EnableHotReload =
builder.Environment.IsDevelopment();
options.ContentPaths.Add("./Components/**/*.razor");
options.MinifyCss =
!builder.Environment.IsDevelopment();
});Automatically fall back to Tailwind CDN if the CLI fails.
{
"Tailbreeze": {
"UseCdnFallback": true
}
}
// If CLI fails to start or produce output,
// middleware redirects to cdn.tailwindcss.com
// Useful for development resilienceVersion 1.3 adds resilience patterns, health monitoring, and production-grade error handling.
Built with Polly for retry policies, exponential backoff, and circuit breaker patterns. Downloads survive transient network failures.
Uses GitHub API to fetch latest Tailwind versions. Results cached for 15 minutes. Supports pinning to specific versions.
Get started with Tailbreeze today. Zero configuration, no Node.js, just beautiful Tailwind CSS in your ASP.NET Core app.