Install Tailwind CSS with .NET

Setting up Tailwind CSS in a .NET project.

Create your project

Start by creating a new .NET Blazor project if you don’t have one set up already.

The steps in this guide will work not only for Blazor, but for any .NET Web project including: MVC, Razor Pages and WebForms.

Terminal

dotnet new blazor --empty -n my-app

Install the Tailwind integration plugin

The Tailwind integration is composed by 2 packages:

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

This packages uses the .NET conventions by default, consider have a look in the official plugin repo for a detailed set of options that you customise.

Terminal

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

Enable Hot Reload

In order to support dontet watch you need to add the following settings to your launch profile.

Properties/launchSettings.json

{
  "$schema": "https://json.schemastore.org/launchsettings.json",
  "profiles": {
    "http": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": true,
      "applicationUrl": "http://localhost:5164",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development",
        "ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Tailwind.Hosting"
      }
    },
    "https": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": true,
      "applicationUrl": "https://localhost:7207;http://localhost:5164",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development",
        "ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Tailwind.Hosting"
      }
    }
  }
}

Create a new CSS file

Create a new stylesheet at wwwroot/styles.css

Terminal

touch wwwroot/styles.css

Import Tailwind CSS

Add an @import to wwwroot/styles.css that imports Tailwind CSS.

wwwroot/styles.css

@import "tailwindcss";

Link to the ouput CSS file

By default the compiler will generate an wwwroot/app.css that is already linked in .NET Template, you find it in your Components/App.razor

Components/App.razor

<!-- For .NET 9+ -->
<link rel="stylesheet" href="@Assets["app.css"]" />
<!-- For .NET 8 -->
<link rel="stylesheet" href="app.css" />

Start using Tailwind in your project

Start using Tailwind’s utility classes to style your content.

Components/Pages/Home.razor

<h1 class="text-3xl font-bold underline">
  Hello world!
</h1>

Windows users with .NET 9 installed

At this moment the there's a bug in .NET 9 compiler for windows that prevents wwwroot/app.css to be rebuild

In order to solve the fingerprinting error, you must include the following lines to your .csproj

MyApp.csproj

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

Start the application

Build the project and start the application with dotnet watch or from your IDE start button.

Terminal

dotnet watch