Tailwind Dotnet

Unofficial Tailwind CSS Integration for .NET.

[!TIP] Please upvote it 👍 if you would like to help me turn this project as official Framework Guide, live demo

• 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.

Core features

• 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

Getting Started

[!WARNING] Windows users: There's a bug in .NET 9 compiler, please check this section

Requirements:

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

Creating a new project

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

Installing the Tailwindcss integration

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"
    }
   

Tailwindcss setup

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";

Configuration

The Tailwind integration will automatically use the .NET conventions and the available MsBuild variables are: | Property | Value | |---|---| | TailwindVersion | latest or custom value like 3.3.5 | | TailwindWatch | true | | TailwindInputCssFile | {Project Folder}/wwwroot/styles.css | | TailwindOutputCssFile | {Project Folder}/wwwroot/app.css | | TailwindConfigFile | {Project Folder}/tailwind.config.js | | TailwindMinifyOnPublish | true | | TailwindExcludeInputFileOnPublish | true |

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>

Windows build problems

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>

Examples

[!NOTE] Although the examples bellow may explicitly use specific Tailwind CSS and .NET versions, this does not mean those are the only supported versions. This integration is compatible with both Tailwind CSS v3 and v4 across any .NET version.

For a more detailed explanation, see https://github.com/kallebysantos/tailwind-dotnet/issues/10

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)