HOWTO: Make Flowbite components work with Blazor 8

ully.

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!