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";
														
														@import "../node_modules/preline/variants.css";
														@source "../node_modules/preline/dist/*.js";

                            /* Optional Preline UI Datepicker Plugin */
                            /* @import "../node_modules/preline/datepicker-styles-utility.css"; */

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

														/* Preline Themes */
														@import "../node_modules/preline/theme.css";

                            /* Optional Preline UI Datatable Plugin: DataTables.net renders its own
                              search/length/paging controls alongside Preline's own; hide the native
                              ones since they can't be disabled through DataTables options alone. */
                            /*
                            .dt-layout-row:has(.dt-search),
                            .dt-layout-row:has(.dt-length),
                            .dt-layout-row:has(.dt-paging) {
                              display: none !important;
                            }
                            */

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 --minify
														mkdir -p wwwroot/js
														cp node_modules/preline/dist/preline.js wwwroot/js/
													
												
```
Development workflow: a separate terminal command is easy to forget after editing styles or updating node_modules. Wire both steps into package.json scripts, then run them automatically as part of the .NET build with an MSBuild target, so dotnet build, dotnet run, and dotnet watch always regenerate current output.
package.json
```
													
														{
															"scripts": {
																"build:css": "tailwindcss -i ./src/input.css -o ./wwwroot/css/tailwind.css --minify",
																"copy:preline-js": "mkdir -p ./wwwroot/js && cp ./node_modules/preline/dist/preline.js ./wwwroot/js/preline.js",
																"build": "npm run copy:preline-js && npm run build:css"
															}
														}
													
												
```
.csproj
<Target Name="TailwindRestore" BeforeTargets="Build" Condition="!Exists('node_modules')"> <Exec Command="npm install" /> </Target> <Target Name="TailwindBuild" BeforeTargets="Build" DependsOnTargets="TailwindRestore"> <Exec Command="npm run build" /> </Target>
```
													
												
```
Load Preline UI in App.razor

Update Components/App.razor to load Preline UI and re-run autoInit after every enhanced navigation patch, not just the first page load — otherwise Preline UI stops initializing new markup after the first in-app navigation. See the Blazor guide for the Blazor Server and WebAssembly re-init pattern.
 <link rel="stylesheet" href="css/tailwind.css" /> <script src="js/preline.js"></script> <script> function initPreline() { window.HSStaticMethods?.cleanCollection(); window.HSStaticMethods?.autoInit(); } // First full page load document.addEventListener("DOMContentLoaded", initPreline); // After each .NET 8+ enhanced navigation patch Blazor.addEventListener("enhancedload", initPreline); </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);

Specific guide

Continue with a focused guide for wiring Preline UI JavaScript plugins into this framework.

Blazor

Using Preline UI with Blazor

Use Preline UI JavaScript plugins in Blazor projects, including serving Preline from wwwroot, the IJSRuntime re-init pattern for Blazor Server renders, the enhancedload navigation hook, Razor components, cleanup, and optional dependencies.

View guide

Blazor quick setup