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.

Terminal

dotnet new blazor --empty -n my-app

Create a new CSS file

Create a new stylesheet at Styles/main.css

Terminal

mkdir Styles && touch Styles/main.css

Import Tailwind CSS

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

Styles/main.css

@import "tailwindcss";

Configure your csproj

Open the my-app.csproj file and add the following targets.

my-app.csproj

<Target Name="Download Tailwind">  <PropertyGroup>    <!-- Which version of the CLI to download -->    <TailwindVersion>v4.0.2</TailwindVersion>        <!-- Determine which version of tailwind to use based on the current OS & architecture -->    <!-- Linux -->    <TailwindReleaseName Condition="$([MSBuild]::IsOsPlatform('Linux')) And $([System.Runtime.InteropServices.RuntimeInformation]::OSArchitecture) == X64">tailwindcss-linux-x64</TailwindReleaseName>    <TailwindReleaseName Condition="$([MSBuild]::IsOsPlatform('Linux')) And $([System.Runtime.InteropServices.RuntimeInformation]::OSArchitecture) == Armv7">tailwindcss-linux-armv7</TailwindReleaseName>        <!-- MacOS -->    <TailwindReleaseName Condition="$([MSBuild]::IsOsPlatform('OSX')) And $([System.Runtime.InteropServices.RuntimeInformation]::OSArchitecture) == X64">tailwindcss-macos-x64</TailwindReleaseName>    <TailwindReleaseName Condition="$([MSBuild]::IsOsPlatform('OSX')) And $([System.Runtime.InteropServices.RuntimeInformation]::OSArchitecture) == Arm64">tailwindcss-macos-arm64</TailwindReleaseName>        <!-- Windows -->    <TailwindReleaseName Condition="$([MSBuild]::IsOsPlatform('Windows')) And $([System.Runtime.InteropServices.RuntimeInformation]::OSArchitecture) == X64">tailwindcss-windows-x64.exe</TailwindReleaseName>    <TailwindReleaseName Condition="$([MSBuild]::IsOsPlatform('Windows')) And $([System.Runtime.InteropServices.RuntimeInformation]::OSArchitecture) == Arm64">tailwindcss-windows-arm64.exe</TailwindReleaseName>  </PropertyGroup>    <!-- Download the file -->  <DownloadFile DestinationFolder="$(ProjectDir)/bin"                DestinationFileName="$(TailwindReleaseName)"                SourceUrl="https://github.com/tailwindlabs/tailwindcss/releases/download/$(TailwindVersion)/$(TailwindReleaseName)"/>  <!-- On unix systems, make the file executable -->  <Exec Condition="$([MSBuild]::IsOsPlatform('Linux')) Or $([MSBuild]::IsOsPlatform('OSX'))" Command="chmod +x $(ProjectDir)/bin/$(TailwindReleaseName)"/></Target><!-- When building the project, run the tailwind CLI --><Target Name="Tailwind" DependsOnTargets="Download Tailwind" BeforeTargets="Build">  <PropertyGroup>    <TailwindBuildCommand>$(ProjectDir)/bin/$(TailwindReleaseName) -i Styles/main.css -o wwwroot/main.build.css</TailwindBuildCommand>  </PropertyGroup>    <Exec Command="$(TailwindBuildCommand)" Condition="'$(Configuration)' == 'Debug'" />  <Exec Command="$(TailwindBuildCommand) --minify" Condition="'$(Configuration)' == 'Release'" /></Target>

Link to the generated CSS file

Add a reference to the CSS file Tailwind generated to the head of the Components/App.razor file.

Components/App.razor

<link rel="stylesheet" href="/main.build.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>

Start the application

Build the project and start the application with dotnet run.

Terminal

dotnet run