Install Preline UI with Blazor using Tailwind CSS

Install Preline UI with Tailwind CSS in Blazor projects, including JavaScript plugin setup, SPA navigation support, app scripts, and optional dependencies.

Prerequisites

This guide assumes you already have a Blazor project with Tailwind CSS configured. If you haven't set up Tailwind CSS yet, check out the Tailwind CSS documentation first.

Blazor quick setup

Start with a Blazor project that already has Tailwind CSS configured, then add Preline UI and wire it into your SPA navigation flow.

Install Preline UI

Install preline with your preferred package manager in your Blazor project directory.
Terminal
```
													
														npm install preline
													
												
```
Preline UI uses the Tailwind CSS Forms plugin across form components. Install it if you have not already: npm install -D @tailwindcss/forms

Update Tailwind source CSS

Add the Preline UI CSS variants, forms plugin, and theme import to src/input.css.

src/input.css

													
														@import "tailwindcss";

														/* Preline UI */
														@source "./node_modules/preline/dist/*.js";
														@import "../node_modules/preline/variants.css";

														/* Plugins */
														@plugin "@tailwindcss/forms";

														/* Preline Themes */
														@import "./themes/theme.css";

Check out the Theme docs to learn more about Preline Themes.

Build CSS and copy Preline JavaScript

Build the Tailwind CSS output, then copy the Preline JavaScript file into wwwroot/js.

Terminal

													
														npx @tailwindcss/cli -i ./src/input.css -o ./wwwroot/css/tailwind.css
														mkdir -p wwwroot/js
														cp node_modules/preline/dist/preline.js wwwroot/js/

Load Preline UI in App.razor

Update Components/App.razor to load Preline UI and expose a reusable initializer for SPA navigation.
 <link rel="stylesheet" href="css/tailwind.css" /> <script src="js/preline.js"></script> <script> // Initialize Preline components function initializePreline() { if (window.HSStaticMethods) { window.HSStaticMethods.autoInit(); } } document.addEventListener('DOMContentLoaded', initializePreline); window.initializePreline = initializePreline; </script>
Components/App.razor
```
													
												
```

Optional Preline UI styles

Preline UI ships with a small set of opinionated base styles. If you want them in your project, add them to your CSS file. These defaults used to come bundled with Tailwind CSS v3, so they are still available as an optional layer in Preline UI.

CSS

												
													/* Adds pointer cursor to buttons */
													@layer base {
														button:not(:disabled),
														[role="button"]:not(:disabled) {
															cursor: pointer;
														}
													}

													/* Defaults hover styles on all devices */
													@custom-variant hover (&:hover);

Blazor quick setup