Tailwind CSS Blazor (.NET) - Flowbite

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.

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

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.

2. Install the .NET SDK (software development kit):

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

You can also install the .NET SDK via HomeBrew:

brew install --cask dotnet

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

-$ dotnet

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

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 project.

dotnet new blazorserver -o BlazorApp --no-https -f net7.0

This command creates your project’s scaffold and a directory called BlazorApp.

Next, you should navigate into the BlazorApp directory:

cd BlazorApp

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

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.

1. Start by removing the pre-installed stylesheets in the wwwroot/ folder. Keep the CSS folder because that’s what we’ll use to store our Tailwind input & output CSS files

2. Next, ensure that you’re still in the BlazorApp Directory then run this command in your terminal:

npm install tailwindcss postcss autoprefixer postcss-cli

3. Create and configure the PostCSS file

Create a postcss.config.js file in the BlazorApp directory or your root directory and add these configurations:

module.exports = {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    }
  }

Run this command in your root directory to generate a Tailwind CSS configuration file:

npx tailwindcss init

You’ll now “tell” Tailwind to watch for files containing utility classes so that the .NET CLI can watch for changes in your project. For our Blazor project, the files that Tailwind needs to track are .html, .cshtml or Razor files. Add the template paths to the content section in your Tailwind config file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./**/*.{razor,html,cshtml}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

1. Next, create an app.css file in the wwwroot/ folder (within the CSS folder that you did not delete earlier) Add these CSS directives to app.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

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

npx tailwindcss -i wwwroot/css/app.css -o wwwroot/css/app.min.css --watch

7. Add a CSS reference to the host file in the Pages directory:

<!DOCTYPE html>
<html lang="en">
<head>
    ...
    <base href="~/" />
    <link href="~/css/app.min.css" rel="stylesheet" />
    </head>

8. Finally, run dotnet watch to start adding Tailwind classes to your Blazor project.

You have now successfully created:

• a new Blazor project
• installed and configured Tailwind CSS with Blazor

Up next, we’ll install and configure Flowbite in our Blazor project. We’ll also showcase how to use the Flowbite UI components in a Blazor project through a dropdown component demo.

Install Flowbite #

Flowbite is an open-source UI component library that is built with Tailwind CSS and vanilla JavaScript. Here’s how you can install and configure it by following these steps to make it work with our Blazor project:

1. First, you need to install Flowbite via NPM:

npm install flowbite

2. Require Flowbite in the Tailwind configuration file as a plugin:

module.exports = {
  // other options
  plugins: [
    require('flowbite/plugin')
  ],
}

3. Add the Flowbite source files to the content module to start applying utility classes from the interactive UI components such as the dropdowns, modals, and navbars:

module.exports = {
  content: [
    // other files...
    "./node_modules/flowbite/**/*.js"
  ],
...
}

4. Add a script tag with this path before the end of the body tag in the host.cshtml page:

    <!-- ... -->
    <script src="https://cdn.jsdelivr.net/npm/flowbite@2.5.2/dist/flowbite.min.js"></script>
  </body>
</html>

You have successfully installed Flowbite and can start using the components to build your Blazor project.

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/Index.razor file:

@page "/"

<button id="dropdownDefaultButton" data-dropdown-toggle="dropdown" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" type="button">Dropdown button <svg class="w-2.5 h-2.5 ml-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
  </svg>
</button>

<!-- Dropdown menu -->
<div id="dropdown" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
    <ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefaultButton">
      <li>
        <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Dashboard</a>
      </li>
      <li>
        <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Settings</a>
      </li>
      <li>
        <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Earnings</a>
      </li>
      <li>
        <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Sign out</a>
      </li>
    </ul>
</div>

Now that you’ve set up Flowbite with Blazor you can explore the whole collection of UI components from the Flowbite Library or use the Flowbite Blocks collection to start building websites.

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.

1. First, you need to define the JS function to initialize Flowbite inside the index.html file:

 <script>
     window.initializeFlowbite = () => {
         initFlowbite();
     }
 </script>

2. After that, in your Mainlayout.razor file, you need to implement the JS interop logic to invoke the JavaScript function window.initializeFlowbite by first injecting the IJSRuntime service into your component:

@inject IJSRuntime Js

And then override the OnAfterRenderAsync method:

@code {
    protected override async Task OnAfterRenderAsync(bool isFirstRender) {
        if (isFirstRender)
        {
           await Js.InvokeVoidAsync("window.initializeFlowbite");
        }
    }
 }

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

Blazor starter project #

The open-source community created an open-source Blazor starter project that you can clone and use as a starting point for building websites with Blazor, .NET, Tailwind CSS and Flowbite.

There’s also an official Flowbite Blazor UI library that the open-source community is working on which should be the native solution for Blazor and .NET applications. Contributions are more than welcome!