Integrating Tailwind CSS with Blazor Server App

Tailwind CSS is a popular utility-first CSS framework that enables developers to quickly build custom designs without having to write custom CSS. Blazor Server, on the other hand, is a Microsoft framework for building interactive web UIs using C# instead of JavaScript. Integrating Tailwind CSS with a Blazor Server application can enhance its styling capabilities and streamline the development process. In this guide, we'll walk through the steps to integrate Tailwind CSS into a Blazor Server app.

Step 1: Create a New Blazor Server Project

Start by creating a new Blazor Server project in Visual Studio. Alternatively, you can use the command-line interface to create a new project. Open your terminal and run the following command:

dotnet new blazorserver-empty -o BlazorAndTailwind
cd BlazorAndTailwind

Step 2: Install Tailwind CSS

Next, install Tailwind CSS and its dependencies using npm. Navigate to the root of your project directory and run the following commands:

npm init -y
npm install tailwindcss postcss autoprefixer postcss-cli

Step 3: Create PostCSS Configuration

Create a postcss.config.js file in the root of your project and add the following content to configure PostCSS:

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

postcss.config.js

Step 4: Generate Tailwind CSS Configuration

tailwindcss provides a convenient method to generate its configuration file. Execute the following command within your project directory:

npx tailwindcss init

It will generate a tailwind.config.js file. For a Blazor project, the files that Tailwind needs to track are .html, .cshtml or Razor files. Add the template paths to the content section of the tailwind.config.js:

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

tailwind.config.js

Step 5: Create Tailwind CSS Stylesheet

You should already have a site.css in the wwwroot/css folder. Include the following directives to the file:

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

site.css

Step 7: Watch Tailwind CSS Output

To streamline development, watch and compile the Tailwind CSS output with the following command:

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

Step 6: Reference Tailwind CSS Stylesheet in _Host.cshtml

In the _Host.cshtml file, add a reference to the generated Tailwind CSS:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="app.min.css" />
    <link rel="stylesheet" href="BlazorAndTailwind.styles.css" />
    <script src="app.js"></script>
    <HeadOutlet @rendermode="InteractiveServer" />
</head>

<body>
    <Routes @rendermode="InteractiveServer"/>
    <script src="_framework/blazor.web.js"></script>
</body>

</html>

_Host.cshtml

Step 7: Testing Tailwind CSS Classes

For testing, add some tailwind classes to the heading element on the Index.razor file:

@page "/"

<h1 class="text-2xl text-purple-500">Hello, world!</h1>

Index.razor

Download Source Code:

https://github.com/fiyazbinhasan/BlazorAndTailwind