.NETPro #32 | Special Edition: Integrating Tailwind CSS into Blazor

🌍 Styling Blazor apps with Tailwind CSS, from setup to production

Apr 28, 2026

When building web interfaces in Blazor, you want the power of C# without sacrificing the elegance of modern styling. Often, the challenge lies in balancing rapid development with high-performance production builds.

In this issue, Kieran Foot solves that dilemma by showing you how to integrate Tailwind CSS into Blazor projects effectively. He shares a pragmatic approach that keeps Hot Reload fast during development while leveraging the Tailwind CLI for lightweight, production-ready assets.

If you are looking to polish your UI without compromising your workflow, this guide will help you get started.

Before you jump in, check out these highlights from our previous editions, if you missed them:

Cheers!
Adrija Mitra
Editor-in-Chief

The Voice Behind This Issue

🧑‍💻 How to Integrate Tailwind CSS with Blazor

When creating beautiful web user interfaces, my go-to combination is Blazor for its simplicity and interactivity, paired with Tailwind CSS for its declarative nature and great styling.

As you know, Blazor is a modern web UI framework that allows you to build an entire website with a single language, C#. This helps you avoid common issues found in JavaScript.

Tailwind CSS is a utility-first CSS framework that allows you to style web interfaces using small, single-purpose classes instead of writing custom CSS classes. It focuses on giving you low-level building blocks rather than predefined UI components.

How do I add Tailwind CSS to my project?

Well, Tailwind CSS for development is very simple to add to a Blazor project. It is as simple as including a single JavaScript link in the header of your App.razor (for Blazor Server-side), as shown below:

<head>    
    ...
    <ImportMap/>
    <HeadOutlet @rendermode="PageRenderMode"/>
    <script src="https://cdn.jsdelivr.net/npm/@@tailwindcss/browser@@4"></script>
</head>

💡 Note

In Blazor, @ is a special character and must be escaped with another @, so all instances of @ become @@.

It’s that simple. You can now use any of the CSS utilities provided by Tailwind CSS.

What about in production?

Well, in production, you want to keep the page load time to a minimum and only load what is essential to the page. Tailwind CSS excels at producing minimal CSS that you can then include in your project in production.

This is achieved through their CLI tool, which can be obtained either through NPM (Node.js Package Manager) or their own binary distributions.

However, Michael Rasicci has made a handy NuGet package that automates installing the CLI tool and executing it for you. You can install it using one of the commands below.

From the Package Manager Console in Visual Studio:

Install-Package Tailwind.MSBuild

Or from the .NET CLI:

dotnet add package Tailwind.MSBuild

Now, all that’s left to do is a little project configuration and to create the tailwind.css input file.

Open your project file (.csproj) and add the following section:

<PropertyGroup Label="Tailwind Properties">
    <TailwindInputFile>$(MSBuildProjectDirectory)\Tailwind\tailwind.css</TailwindInputFile>
    <TailwindOutputFile>$(MSBuildProjectDirectory)\wwwroot\css\site.css</TailwindOutputFile>
    <TailwindMinify>true</TailwindMinify>
</PropertyGroup>

This tells the Tailwind CSS CLI tool where your input (configuration) file is and where to write the generated CSS to.

Now you need to create a new directory in your project named Tailwind and, within that directory, create a new CSS file named tailwind.css. This is the configuration file for the Tailwind CSS CLI tool.

For now, we will go with the default configuration, so the content is a simple one-liner, as shown below:

@import "tailwindcss";

Now, if you build your project, you will notice the newly generated CSS file located in your /wwwroot/css folder, named tailwind.css. Currently, it will contain some default styles for your pages and simple styling utilities.

Now, when your project is built, the Tailwind CSS tool will scan your source files and generate your tailwind.css file based on the classes you are using.

All that’s left to do is configure your application to use the new CSS file. To do this, remove the JavaScript reference we added earlier and replace it with a link to your new stylesheet, as shown below:

<head>    
    ...
    <ImportMap/>
    <HeadOutlet @rendermode="PageRenderMode"/>
    <link rel="stylesheet" href="@Assets["tailwind.css"]"/>
</head>

But this doesn’t play nice with Hot Reload?

Correct, since the output CSS is only generated upon a project build, it does not get updated when the page is updated via Hot Reload.

To fix this, we can use a combination of the Tailwind CSS JavaScript and the generated CSS.

Firstly, in your App.razor, you will need to inject a reference to IWebHostEnvironment so we can ascertain what environment we’re running under. To do this, insert the line below at the top of your App.razor file:

@inject IWebHostEnvironment Environment

Now, the head section can be modified as shown below:

<head>    
    ...
    <ImportMap/>
    <HeadOutlet @rendermode="PageRenderMode"/>
    @if (Environment.IsProduction())
    {
        <link rel="stylesheet" href="@Assets["tailwind.css"]"/>
    }
    else
    {
        <script src="https://cdn.jsdelivr.net/npm/@@tailwindcss/browser@@4"></script>
    }
</head>

This gives us the best of both worlds, full usage of all Tailwind CSS utilities with support for Hot Reload in development and small, statically generated CSS in production.

What now?

That’s it, you’re all set up to use Tailwind CSS in your project. Head over to https://tailwindcss.com/docs and explore the plethora of documentation.

To see what others have built with Tailwind CSS, head over to https://tailwindcss.com/showcase, where you can see some absolutely stunning websites.

Catch the latest HubSpot Developer Platform updates in Spring Spotlight

Spring Spotlight 2026 is live and we’ve rounded up the top updates for developers. See what's new for the HubSpot Developer Platform! Ship faster with AI coding tools like Cursor, Claude Code, and Codex. Build MCP-powered AI connectors, run serverless functions with support for UI extensions, and use date-based versioning to streamline roadmap planning.

Explore Now

📝 Spotted something worth calling out?

We’d love to hear about it—just drop us a quick note through this 1-minute survey. We’re all ears!

👋 Advertise With Us

Interested in sponsoring this newsletter and reaching a highly engaged audience of tech professionals? Take a look at our sponsorship page to explore available options. If it’s a good fit, contact ruvikar@packt.com to get started with the next steps.

And that’s a wrap 🎬

We’re glad you joined us for this edition of .NETPro!

If you have any thoughts, questions, or feedback on this edition, or if you’d like to share what you’d love to see next, feel free to take our 1-minute survey. We’d love to hear from you.

Thanks for following along! Until next time, keep learning and keep building.

SUBSCRIBE FOR MORE AND SHARE WITH A FRIEND

.NETPro By Packt

Discussion about this post

Ready for more?