DEV Community

Cover image for How to Install Tailwind CSS v4 in a .NET Blazor App (The Easy Way)
Md. Injamul Alam
Md. Injamul Alam

Posted on

How to Install Tailwind CSS v4 in a .NET Blazor App (The Easy Way)

#blazor #tailwindcss #dotnet #webdev

A step-by-step, beginner-friendly guide to stripping out Bootstrap and setting up the blazing-fast Tailwind CSS v4 compiler in your .NET Blazor Hybrid or Web app.

Tailwind CSS v4 is officially here, and it is a complete game-changer! It scraps the old, bulky JavaScript configuration files (tailwind.config.js) and moves your theme settings directly into standard CSS. Plus, its new native compiler is faster than ever.

If you are building a .NET Blazor app (whether it's Blazor WebAssembly, Server, or a MAUI Blazor Hybrid app) and want to swap out the default Bootstrap styles for utility-first Tailwind bliss, you can do it all without ever leaving your IDE.

Let's get this configured step-by-step using Visual Studio 2022!

Prerequisites

Before we start, make sure you have:

  • Node.js installed on your development machine.
  • A Blazor project opened in Visual Studio 2022.

Step 1: Say Goodbye to Bootstrap in Solution Explorer

Blazor templates ship with Bootstrap by default. Let's use Visual Studio's Solution Explorer to clean that out so our styles don't conflict.

  1. In the Solution Explorer window, expand your wwwroot folder.
  2. Expand the css subfolder.
  3. Right-click the bootstrap folder and select Delete.
  4. Now, open your main HTML entry file inside wwwroot (this will be index.html for Blazor Hybrid/WASM or App.razor inside the Components folder for Blazor Web).
  5. Locate the <head> section and delete the line linking the Bootstrap stylesheet: 
   <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
Enter fullscreen mode Exit fullscreen mode


powershell

Step 2: Open the Developer PowerShell & Install Tailwind v4

Tailwind v4 splits the design library from the command-line build tool, so we need to install both. We can use Visual Studio's built-in terminal for this.

  1. In the top menu of Visual Studio 2022, go to Tools > Command Line > Developer PowerShell.
  2. A terminal window will open at the bottom of your IDE, already navigated to your project folder. Paste and run the following commands:

i. Initialize a package.json file if your project doesn't have one yet

npm init -y
Enter fullscreen mode Exit fullscreen mode


powershell
ii. Install Tailwind CSS v4 and the official standalone CLI compiler

npm install -D tailwindcss @tailwindcss/cli
Enter fullscreen mode Exit fullscreen mode


css

Step 3: Create Your Source CSS File

In Tailwind v4, all customization happens inside a CSS file using standard CSS @theme rules. Let's create our main styling entry point.

  1. Right-click your wwwroot/css folder in Solution Explorer, select Add > New Item...
  2. Choose Style Sheet or a blank text file, name it tailwind-source.css, and click Add.
  3. Open your new file and paste this single line at the very top to import Tailwind's core styles: 
@import "tailwindcss";

@theme {
  --color-brand-primary: #1e40af;
}
Enter fullscreen mode Exit fullscreen mode


html

Step 4: Link the Compiled Output to Your App

The Tailwind compiler is going to read your tailwind-source.css, scan your Razor components for utility classes, and automatically generate a production-ready file named app.css inside wwwroot/css.
Open your index.html (or App.razor) file again and ensure it points to that compiled file inside the <head> tags:

<link rel="stylesheet" href="css/app.css" />
Enter fullscreen mode Exit fullscreen mode


xml

Step 5: Automate Compiling with the Visual Studio Build Engine

Instead of manually running a background terminal window to watch your CSS files every time you code, we can configure Visual Studio's MSBuild engine to compile Tailwind automatically whenever you click Build or press F5!

  1. In Solution Explorer, double-click your project name (e.g., MyBlazorTailwindApp) to open its underlying .csproj file.
  2. Scroll to the very bottom, and paste this <Target> block right before the final closing </Project> tag: 
//XML
<Target Name="Tailwind" BeforeTargets="Build" Condition="'$(Configuration)' == 'Debug'">
    <Exec Command="cmd /c npx tailwindcss -i ./wwwroot/css/tailwind-source.css -o ./wwwroot/css/app.css" />
</Target>
Enter fullscreen mode Exit fullscreen mode


html

How it works:
Every time you debug or build your application within Visual Studio 2022, MSBuild invokes npx tailwindcss. It automatically checks your local node packages, processes your utility styles, and updates your app.css right before the app launches.

Time to Test It!
Let's see it in action. Go to the top menu and select Build > Build Solution (or press Ctrl + Shift + B). You will see your build succeed cleanly, generating the app.css file automatically.

Now open any .razor file (like Home.razor) and add some Tailwind classes:

<div class="flex min-h-screen items-center justify-center bg-slate-900 text-white">
    <div class="p-8 bg-slate-800 rounded-2xl shadow-xl border border-slate-700 max-w-md text-center">
        <h1 class="text-3xl font-bold text-sky-400 mb-2">Blazor with Tailwindcss v4</h1>
        <p class="text-slate-400">Utility-first styling is officially up and running natively inside Visual Studio 2022!</p>
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Press F5 or click the green Play/Debug button in Visual Studio. Your app will spin up, completely styled by Tailwind CSS v4!

Wrap Up
Setting up Tailwind CSS v4 in Blazor doesn't require messy extensions or convoluted setups. By pairing @tailwindcss/cli with a quick MSBuild execution script right inside Visual Studio 2022, you get a clean, seamless developer workflow.

Are you using Tailwind v4 in your .NET applications yet? Let me know in the comments below if you ran into any issues setting this up!

Top comments (0)