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.
- In the Solution Explorer window, expand your
wwwrootfolder. - Expand the
csssubfolder. - Right-click the
bootstrapfolder and select Delete. - Now, open your main HTML entry file inside
wwwroot(this will beindex.htmlfor Blazor Hybrid/WASM orApp.razorinside the Components folder for Blazor Web). - Locate the
<head>section and delete the line linking the Bootstrap stylesheet:
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
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.
- In the top menu of Visual Studio 2022, go to
Tools > Command Line > Developer PowerShell. - 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
powershell
ii. Install Tailwind CSS v4 and the official standalone CLI compiler
npm install -D tailwindcss @tailwindcss/cli
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.
- Right-click your
wwwroot/cssfolder in Solution Explorer, selectAdd > New Item... - Choose Style Sheet or a blank text file, name it
tailwind-source.css, and clickAdd. - 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;
}
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" />
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!
- In Solution Explorer, double-click your project name (e.g., MyBlazorTailwindApp) to open its underlying
.csprojfile. - 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>
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>
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!
