Docs
Framework Guides
ASP.NET Core

Install Preline UI with ASP.NET Core using Tailwind CSS

Install Preline UI with Tailwind CSS in ASP.NET Core projects, including JavaScript plugin setup, layout scripts, app styles, and optional dependencies.

Prerequisites

This guide assumes you have ASP.NET Core 9.0+ and .NET 9.0 SDK installed. You'll also need Node.js and npm for Tailwind CSS and Preline UI. If you haven't set up Tailwind CSS yet, check out the Tailwind CSS documentation first.

ASP.NET Core quick setup

Start with an ASP.NET Core project that already has Tailwind CSS configured, then add Preline UI and load its assets in your shared layout.

Install Preline UI

Install preline with your preferred package manager in your ASP.NET Core 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.

The datepicker/styles-utility.css import is required for the Datepicker component's calendar grid utility classes (.vc-*). Without it, Datepicker still initializes but its grid renders unstyled.

Build CSS and add it to the layout

Build the Tailwind CSS output, then load the compiled stylesheet in Views/Shared/_Layout.cshtml.
Terminal
```
													
														npx @tailwindcss/cli -i ./src/input.css -o ./wwwroot/css/tailwind.css
													
												
```
Views/Shared/_Layout.cshtml
 <link rel="stylesheet" href="~/css/tailwind.css" asp-append-version="true" />
```
													
												
```
Development workflow: Run the build command whenever you change your styles. During development, you can use npx @tailwindcss/cli -i ./src/input.css -o ./wwwroot/css/tailwind.css --watch to rebuild automatically.

A separate terminal is easy to forget to start. To keep tailwind.css current automatically, wire the build into the project file instead so dotnet build, dotnet run, and dotnet watch regenerate it as part of the normal .NET build.
.csproj
<Target Name="TailwindBuild" BeforeTargets="Build"> <Exec Command="npx @tailwindcss/cli -i ./src/input.css -o ./wwwroot/css/tailwind.css --minify" /> </Target>
```
													
												
```
Serve the Preline UI runtime with LibMan

node_modules is not served as static content from wwwroot by default, so pull the compiled Preline JavaScript into wwwroot with LibMan, the library manager built into the .NET tooling, then load it in Views/Shared/_Layout.cshtml.
libman.json
```
													
														{
															"version": "1.0",
															"defaultProvider": "jsdelivr",
															"libraries": [
																{
																	"library": "preline@latest",
																	"destination": "wwwroot/lib/preline/",
																	"files": ["dist/preline.js"]
																}
															]
														}
													
												
```
Terminal
```
													
														libman restore
													
												
```
Views/Shared/_Layout.cshtml
 <script src="~/lib/preline/dist/preline.js" asp-append-version="true"></script>
```
													
												
```
Visual Studio restores LibMan libraries on build automatically; on other tooling, run libman restore after npm install. The npm install from step 1 is still required even when the runtime is served via LibMan — it is what provides variants.css and theme.css for the Tailwind CSS build in the previous step.

If a page uses a component with an optional third-party dependency, such as Datatable or Datepicker, place that page's own scripts in an @section Scripts block positioned before this preline.js tag in _Layout.cshtml — the default ASP.NET Core project templates render @RenderSectionAsync("Scripts") after the page's own scripts, which is the wrong order here. See optional dependencies for why the order matters.

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.

ASP.NET Core

Using Preline UI with ASP.NET Core

Use Preline UI JavaScript plugins in ASP.NET Core MVC and Razor Pages projects, including serving Preline from wwwroot with LibMan, the Vite build path, re-init after partial view and AJAX updates, Razor templates, cleanup, and optional dependencies.

View guide

ASP.NET Core quick setup