Blazorise Tailwind Usage

Quickly install Blazorise with Tailwind, one of the world's most popular Blazor UI framework.

Blazorise Tailwind provider is made possible with the help of Flowbite, an open-source Tailwind CSS Components.

Install Packages

First step is to install a Tailwind provider for Blazorise:
Install-Package Blazorise.Tailwind
You also need to install the icon package:
Install-Package Blazorise.Icons.FontAwesome

Add Static Files

Add the following to your HTML head section. Depending on whether you're running WebAssembly or Server, it's either index.html or _Layout.cshtml / _Host.cshtml.
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&amp;display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/flowbite@1.5.4/dist/flowbite.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" />

<script src="https://cdn.tailwindcss.com"></script>
<script src="_content/Blazorise.Tailwind/blazorise.tailwind.config.js?v=1.4.2.0"></script>

<link href="_content/Blazorise/blazorise.css" rel="stylesheet" />
<link href="_content/Blazorise.Tailwind/blazorise.tailwind.css" rel="stylesheet" />
In the same file add the following. It should be placed just before the default blazor script.
<script src="https://unpkg.com/flowbite@1.5.4/dist/flowbite.js"></script>

Add Imports

In your main _Imports.razor add:
@using Blazorise

Register Services

Add the following lines to the relevant sections of Program.cs.
using Blazorise;
using Blazorise.Tailwind;
using Blazorise.Icons.FontAwesome;

builder.Services
    .AddBlazorise()
    .AddTailwindProviders()
    .AddFontAwesomeIcons();

PWA & Offline Support (optional)

For information about PWAs & offline support, please take a look at our PWA docs.

On this page