Tailwind CSS home page
  1. Getting Started
  2. Install Tailwind CSS with .NET

  1. 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-appcd my-app

  2. Create a new CSS file

    Create a new stylesheet at Styles/main.css

    Terminal
    mkdir Stylestouch Styles/main.css

  3. Add the Tailwind directives to your CSS

    Add the @tailwind directives for each of Tailwind’s layers to your ./Styles/main.css file.

    Styles/main.css
    @tailwind base;
@tailwind components;
@tailwind utilities;

  4. Create the tailwind.config.js file

    Create a file at the root of the project called tailwind.config.js

    Terminal
    touch tailwind.config.js

  5. Configure the tailwind.config.js file

    Add the paths to all of your template files in your tailwind.config.js file.

    You may have to adjust the content paths if you're not using Blazor.

    tailwind.config.js
    /** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./Components/**/*.razor",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

  6. 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>v3.4.15</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>

  7. 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="@Assets["main.build.css"]" />

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

  9. Start the application

    Build the project and start the application with dotnet run.

    Terminal
    dotnet run