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 Styles/main.css that imports Tailwind CSS.

Styles/main.css

@import "tailwindcss";

Configure the project

Add a file called Tailwind.targets at the root of the project.

This file declares MSBuild targets that download the Tailwind CLI, and build the stylesheets as part of dotnet build.

Tailwind.targets

<Project ToolsVersion="15.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
  <PropertyGroup>
    <!-- Specify which version of Tailwind to download -->
    <TailwindVersion>v4.0.14</TailwindVersion>
    <!-- Provide the path to the input & output stylesheets -->
    <InputStyleSheetPath>Styles/main.css</InputStyleSheetPath>
    <OutputStyleSheetPath>wwwroot/main.build.css</OutputStyleSheetPath>
    <!-- Provide the path to where Tailwind should be downloaded to -->
    <!-- This should be a path that is writable by the current user, as well as one that is accessible in CI/CD pipelines -->
    <!-- On Linux and MacOS, use $XDG_CACHE_HOME or $HOME/.cache ($HOME/.cache/Tailwind/<TailwindVersion>) -->
    <TailwindDownloadPath Condition="$([System.OperatingSystem]::IsLinux()) Or $([System.OperatingSystem]::IsMacOS())">$([System.IO.Path]::Combine($([MSBuild]::ValueOrDefault($([System.Environment]::GetEnvironmentVariable('XDG_CONFIG_HOME')), $([System.IO.Path]::Combine($([System.Environment]::GetEnvironmentVariable('HOME')), '.cache')))), 'Tailwind'))</TailwindDownloadPath>
    <!-- On Windows, use local app data (%LOCALAPPDATA%\Tailwind\<TailwindVersion>) -->
    <TailwindDownloadPath Condition="$([System.OperatingSystem]::IsWindows())">$([System.IO.Path]::Combine($([System.Environment]::GetFolderPath($([System.Environment]::SpecialFolder.LocalApplicationData))), 'Tailwind'))</TailwindDownloadPath>
  </PropertyGroup>
  <!-- This line supports hot reload by instructing dotnet watch to be aware of modifications to the input stylesheet -->
  <ItemGroup>
    <Watch Include="$(InputStyleSheetPath)"/>
  </ItemGroup>
  <Target Name="DownloadTailwind">
    <PropertyGroup>
      <!-- Determine which version of Tailwind to use based on the current OS & architecture -->
      <TailwindReleaseName Condition="$([System.OperatingSystem]::IsLinux()) And $([System.Runtime.InteropServices.RuntimeInformation]::OSArchitecture) == X64">tailwindcss-linux-x64</TailwindReleaseName>
      <TailwindReleaseName Condition="$([System.OperatingSystem]::IsLinux()) And $([System.Runtime.InteropServices.RuntimeInformation]::OSArchitecture) == Armv7">tailwindcss-linux-armv7</TailwindReleaseName>
      <TailwindReleaseName Condition="$([System.OperatingSystem]::IsMacOS()) And $([System.Runtime.InteropServices.RuntimeInformation]::OSArchitecture) == X64">tailwindcss-macos-x64</TailwindReleaseName>
      <TailwindReleaseName Condition="$([System.OperatingSystem]::IsMacOS()) And $([System.Runtime.InteropServices.RuntimeInformation]::OSArchitecture) == Arm64">tailwindcss-macos-arm64</TailwindReleaseName>
      <TailwindReleaseName Condition="$([System.OperatingSystem]::IsWindows()) And $([System.Runtime.InteropServices.RuntimeInformation]::OSArchitecture) == X64">tailwindcss-windows-x64.exe</TailwindReleaseName>
      <TailwindReleaseName Condition="$([System.OperatingSystem]::IsWindows()) And $([System.Runtime.InteropServices.RuntimeInformation]::OSArchitecture) == Arm64">tailwindcss-windows-arm64.exe</TailwindReleaseName>
    </PropertyGroup>
    <!-- Download the file -->
    <DownloadFile DestinationFolder="$([System.IO.Path]::Combine('$(TailwindDownloadPath)', '$(TailwindVersion)'))"
                  DestinationFileName="$(TailwindReleaseName)"
                  SourceUrl="https://github.com/tailwindlabs/tailwindcss/releases/download/$(TailwindVersion)/$(TailwindReleaseName)"
                  SkipUnchangedFiles="true"
                  Retries="3">
      <Output TaskParameter="DownloadedFile" PropertyName="TailwindCliPath"/>
    </DownloadFile>
    <!-- On unix systems, make the file executable -->
    <Exec Condition="$([System.OperatingSystem]::IsLinux()) Or $([System.OperatingSystem]::IsMacOS())" Command="chmod +x '$(TailwindCliPath)'"/>
  </Target>
  <!-- When building the project, run the Tailwind CLI -->
  <!-- This target can also be executed manually. For example, with dotnet watch: `dotnet watch msbuild /t:Tailwind` -->
  <!-- In order to use hot reload, run both `dotnet watch run` and `dotnet watch msbuild /t:Tailwind` -->
  <Target Name="Tailwind" DependsOnTargets="DownloadTailwind" BeforeTargets="Build">
    <PropertyGroup>
      <TailwindBuildCommand>'$(TailwindCliPath)' -i '$(InputStyleSheetPath)' -o '$(OutputStyleSheetPath)'</TailwindBuildCommand>
    </PropertyGroup>
    <Exec Command="$(TailwindBuildCommand)" Condition="'$(Configuration)' == 'Debug'"/>
    <Exec Command="$(TailwindBuildCommand) --minify" Condition="'$(Configuration)' == 'Release'"/>
  </Target>
</Project>

Configure your csproj

Open the my-app.csproj file and import the Tailwind.targets file.

my-app.csproj

<Import Project="Tailwind.targets" />

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