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

Modify your project's HTML template to include the necessary CSS files. The files you add depend on whether you're working with a WebAssembly or Server project:

  • For WebAssembly, update index.html.
  • For Server, update _Layout.cshtml or _Host.cshtml.
  • For .NET 8, update App.razor.

Add these lines inside the <head> section: 
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&amp;display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/flowbite@4.0.1/dist/flowbite.min.css" rel="stylesheet" />
<link href="_content/Blazorise.Icons.FontAwesome/v6/css/all.min.css" rel="stylesheet">

<link href="_content/Blazorise/blazorise.css?v=2.0.0.0" rel="stylesheet" />
<link href="_content/Blazorise.Tailwind/blazorise.tailwind.css?v=2.0.0.0" rel="stylesheet" />
In the same file add the following. It should be placed just before the default blazor script. 
<script src="https://cdn.jsdelivr.net/npm/flowbite@4.0.1/dist/flowbite.min.js"></script>

If you're interested in integrating Tailwind CSS with your Blazor projects, check out our blog post that guides you through the process of using Tailwind CSS with Blazor.

Custom Tailwind Pipeline

If you want Tailwind to generate utilities for your app while keeping Blazorise styles, build a single Tailwind output and reference it instead of the prebuilt _content/Blazorise.Tailwind/blazorise.tailwind.min.css.

  • Copy the Blazorise Tailwind build inputs from the Blazorise repository into your project: btw-prebuild.css, blazorise.tailwind.css, btw-colors.css, and safelist.txt.
  • Extend the entry file with your own @source directives (for example, @source "./**/*.razor"), @theme overrides, and custom utilities.
  • Build one CSS file with Tailwind and include it in your app in place of the package stylesheet.

Safelist Classnames

Blazorise generates some classnames dynamically, so Tailwind content scanning might not see them. Use the provided safelist.txt file as an additional content source to keep those classes in your output.

  • Keep one class per line in your safelist file and add any of your own dynamic classes there as well.
  • Reference it in your Tailwind entry file with @source "./path/to/safelist.txt" or pass it via the Tailwind CLI --content argument.

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