Tailwind CSS Blazor (.NET) - Flowbite

Learn how to install Tailwind CSS with Flowbite for your Blazor (.NET) project and start developing modern web applications based on the full-stack framework

Blazor is an open source .NET framework for building dynamic and interactive front-ends for your applications with HTML, C#, and Razor templates. Blazor allows you to compose components directly for your server or for the client side. This flexibility enables developers to create fullstack web and mobile applications with a single-page UI framework.

Typically, most frontend frameworks use JavaScript under the hood but with Blazor, you can build both front-ends and back-ends with C#. Developers who are well versed in C# can easily build fullstack applications without switching to a different framework.

More companies are adopting Blazor into their development workflows because a developer can write client side and server side logic with only C# and .NET. Some examples include GE Aviation, BurnRate, The Postage, and Pernod Ricard.

Blazor provides all the scaffolding, abstractions, tooling and optimizations you need on a project.

Requirements #

In this guide, you will learn how to build a new Blazor Project, and how to integrate Flowbite UI components into your application. We’ll use a modal component for this exercise to demonstrate a real use case.

You’ll need to install and configure the .NET SDK, Tailwind CSS, Blazor and Flowbite into your application. Ensure you have installed NPM and Node.js on your local environment. Let’s get started!

Create a new Blazor project #

Start by downloading and installing the .NET SDK. The SDK allows us to develop apps with .NET frameworks. The Blazor website detects which version you’ll need for your local environment.

Start by installing the Microsoft package repository that contains the package signing key:

Terminal

wget https://packages.microsoft.com/config/ubuntu/20.04/packages-microsoft-prod.deb -O packages-microsoft-prod.deb
sudo dpkg -i packages-microsoft-prod.deb
rm packages-microsoft-prod.deb

If you’re running on MacOS or another Linux distribution, visit the Microsoft website to learn how to install the SDK on your local environment. .NET can be installed on Windows, MacOS, and Linux.

Install the .NET SDK (software development kit):

Terminal

sudo apt-get update && \
sudo apt-get install -y dotnet-sdk-7.0

You can also install the .NET SDK via HomeBrew:

Terminal

brew install --cask dotnet

Open your terminal and run this command to confirm a successful installation:

Terminal

-$ dotnet

This is the output you should see to confirm that you installed the .NET SDK successfully:

Terminal

Usage: dotnet [options]
Usage: dotnet [path-to-application]

Options:
  -h|--help         Display help.
  --info            Display .NET information.
  --list-sdks       Display the installed SDKs.
  --list-runtimes   Display the installed runtimes.

path-to-application:
  The path to an application .dll file to execute.

Run this command in your terminal to create a new Blazor WASM project.

Terminal

dotnet new blazorwasm

Run this command in your terminal to launch your application and watch for changes:

Terminal

dotnet watch

Your terminal will show that your app is listening on http://localhost:<port number> and should launch on your web browser. You can also click on the port to run your application.

Congratulations! You have now installed and run your first Blazor project.

In the next section, we will configure Tailwind CSS with Blazor.

Install Tailwind CSS #

There are two ways to install Tailwind in a Blazor Project: by using the Tailwind CLI or PostCSS.

PostCSS helps in transforming tailwindcss to styling that is relevant to your project. It also helps you remove unnecessary styling which helps in reducing the size of your files.

Start by installing the Tailwind CSS packages using NPM:

Terminal

npm install tailwindcss @tailwindcss/cli --save-dev

Next, create an input.css file in the wwwroot/css/ folder and import the following directive:

input.css

@import "tailwindcss";

Go to your terminal and run the Tailwind CLI to generate the output CSS watch for changes in your project:

Terminal

npx tailwindcss -i wwwroot/css/input.css -o wwwroot/css/output.css --watch

Add the new output.css CSS reference to the index.html file in the wwwroot/ folder:

index.html

npm install flowbite --save

Import the default theme variables from Flowbite inside your main input.css CSS file:

input.css

/* choose one of the following */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@import "flowbite/src/themes/default";

/* MINIMAL THEME
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import "flowbite/src/themes/minimal";
*/

/* ENTERPRISE THEME
@import url('https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import "flowbite/src/themes/enterprise";
*/

/* PLAYFUL THEME
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap');
@import "flowbite/src/themes/playful";
*/

/* MONO THEME
@import "flowbite/src/themes/mono";
*/

Import the Flowbite plugin file in your CSS:

input.css

@plugin "flowbite/plugin";

Configure the source files of Flowbite in your CSS:

input.css

@source "../../node_modules/flowbite";

Now you have installed Flowbite and the styles associated with it. Please follow the next steps to make the interactive JS components work with your Blazor project.

WASM integration #

To use Flowbite with Blazor WebAssembly (WASM), you will need to setup the Flowbite init functions using an interop layer that ensures the DOM rendering before applying the event listeners via the data attributes API.

First, you need to create a new flowbite-interop.js file inside wwwroot/ and add the following code:

flowbite-interop.js

window.flowbiteInterop = {
    initializeFlowbite: function () {
        return initFlowbite();
    }
};

After that, create a new Services/FlowbiteService.cs service inside your Blazor project:

Services/FlowbiteService.cs

using Microsoft.JSInterop;

namespace tailwind_4_blazor_starter.Services;

public interface IFlowbiteService
{
    ValueTask InitializeFlowbiteAsync();
}

public class FlowbiteService : IFlowbiteService
{
    private readonly IJSRuntime _jsRuntime;

    public FlowbiteService(IJSRuntime jsRuntime)
    {
        _jsRuntime = jsRuntime;
    }

    public async ValueTask InitializeFlowbiteAsync()
    {
        await _jsRuntime.InvokeVoidAsync("flowbiteInterop.initializeFlowbite");
    }
}

This creates a reusable service for all of your Blazor WASM pages.

Program.cs

using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using tailwind_4_blazor_starter;

// add this
using tailwind_4_blazor_starter.Services;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

// add this
builder.Services.AddScoped<IFlowbiteService, FlowbiteService>();

await builder.Build().RunAsync();

Import the Flowbite Javascript file and the flowbite-interop.js file in your index.html file:

index.html

using Microsoft.AspNetCore.Components;
using tailwind_4_blazor_starter.Services;

namespace tailwind_4_blazor_starter.Pages;

public abstract class FlowbitePage : ComponentBase
{
    [Inject]
    protected IFlowbiteService FlowbiteService { get; set; } = default!;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await FlowbiteService.InitializeFlowbiteAsync();
        }
        await base.OnAfterRenderAsync(firstRender);
    }
}

Use the inheritance directive in your pages to load the Flowbite JS components:

Home.razor

@page "/"

@inherits FlowbitePage

<PageTitle>Home</PageTitle>

<!-- your components -->

Congratulations! You have now integrated the interactive JS components from Flowbite with a Blazor WASM.

UI components for Blazor #

Now that you have successfully installed Blazor.NET, Tailwind CSS and Flowbite, you can start using Flowbite’s UI components such as navbars, buttons, and modals in your project.

Copy and paste this dropdown component example into your Pages/Home.razor file:

Home.razor