HOWTO: Make Flowbite components work with Blazor 8

Making Tailwind and Flowbite work together in your Blazor 8 solution

I've got a website prototype built in HTML/CSS/Javascript using Tailwind CSS and Flowbite components to migrate into a Blazor 8 interactive server application, and until recently it seemed impossible to get these things to all work together. That was until I saw the Blazor section in their documentation. Which, after playing with for a good while, couldn't get to work because it was built on net7.0. But, after building a new, temporary website, some practice, and some feedback in the GitHub repo, got it working successfully.

The TL;DR version is this:

install Tailwind and Flowbite as mentioned in the instructions here
copy the JS and CSS file from the dist folder in node_modules to your own folder in wwwroot like so:
Reference it in App.razor like so:

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <base href="/"/>
    <!-- other css references -->
    <!-- make sure you include this -->
    <link rel="stylesheet" href="js/flowbite/flowbite.min.css"/>
    <HeadOutlet/>
</head>

<body>
<Routes/>
<script src="js/flowbite/flowbite.min.js"></script>
<script src="js/flowbite/datepicker.min.js"></script>
<script src="_framework/blazor.web.js"></script>
</body>

On the page you're working on that requires Flowbite interactivity, you'll also do this:

@inject IJSRuntime JS
@rendermode InteractiveServer
@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

<section id="slideTest" class="mx-[16px] w-full md:mx-[40px]">
    <div id="default-carousel" class="relative w-full" data-carousel="slide">
        <!-- Carousel wrapper -->
    </div>
</section>


@code{
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
            await base.OnAfterRenderAsync(firstRender);
            await JS.InvokeVoidAsync("initFlowbite");
    }
}

**Note: ** The initFlowbite method is in the Flowbite library -- you do not have to create this. It should initialize all the Flowbite components for you (your mileage may vary with Timepicker, seems there might be some issues with that one).

My tailwind.config.js file looks like this:


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

The documentation site mentions Flowbite Blazor components - at the time of this writing, that project looks abandoned. Avoid, and use this approach to the best of your abilities.

I strongly encourage you to test this for yourself in a separate, standalone project to make sure the components you're trying to use work there successfully before incorporating into your own project - especially if these components are new to you.

Hope that helps!

Looking for help upgrading your web apps to Blazor? Contact us and let's see what we can do to help!