How to Install Tailwind CSS v4 in a .NET Blazor App (The Easy Way)
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 wwwroot folder. Expand the css subfolder. Right-click the bootstrap folder and select Delete . 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). 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 fil