Unofficial Tailwind CSS Integration for .NET.

• Core features
• Installation
• Configuration
• Examples

This repository haves a pack toolset for tailwindcss integration with .Net that is based in 2 main packages, one for Hosting Startup and other for MsBuild.

• No external requirements, like NodeJs or Postcss
• Integrated hot-reload, it works with dotnet watch as well most common IDEs(Visual Studio and Rider)
• Minified output on publish
• .NET 9+ static asset compression

You only need .NET, nothing more! - No npm neither postcss stuff

First of all let's create a new .Net 8 Blazor app

dotnet new blazor --empty -o BlazorWind -f net8.0

Of course you can use this same guide for mvc, razor or even the legacy webforms

Now you need to add 2 packages:

1. Tailwind.Hosting: Add support for HotReload when you execute dotnet watch
2. Tailwind.Hosting.Build: Integrates with the MsBuild compiler, so it will automatically setup the tailwindcss as well generate publish ready output on dotnet publish

dotnet add package Tailwind.Hosting
dotnet add package Tailwind.Hosting.Build

Finally to enable HotReload you only need to add the following to your Properties/launchSettings.json

    "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development",
        "ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Tailwind.Hosting"
    }

This last one is related with tailwind itself. Since v4 you only need to add the following to a wwwroot/styles.css file:

@import "tailwindcss";

The Tailwind integration will automatically use the .NET conventions and the available MsBuild variables are:

All variables can be overwritten from .csproj

<PropertyGroup Label="Tailwind.Hosting.Build Props">
    <TailwindVersion>latest</TailwindVersion>
    <TailwindWatch>true</TailwindWatch>

    <TailwindInputCssFile>wwwroot/styles.css</TailwindInputCssFile>
    <TailwindOutputCssFile>wwwroot/app.css</TailwindOutputCssFile>
    <TailwindConfigFile>tailwind.config.js</TailwindConfigFile>

    <TailwindMinifyOnPublish>true</TailwindMinifyOnPublish>
    <TailwindExcludeInputFileOnPublish>true</TailwindExcludeInputFileOnPublish>
</PropertyGroup>

You may found a static web asset fingerprinting problem on windows, to avoid this please add the following lines to your .csproj. It could happens if you've installed the .NET 9 cli

<Target Name="CleanUpTailwindStaticCache" BeforeTargets="PrepareForBuild" >
    <ItemGroup>
        <Content Remove="$(TailwindOutputCssFile)"/>
    </ItemGroup>
</Target>

You can find more in examples folder:

• .NET 8 Blazor example (tailwind v3)
• .NET 9+ Static Assets Blazor example (tailwind v4)
• .NET 4.8 WebForms example (tailwind v4)