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

Configure Tailwind CSS and create the source CSS file

Set up the Tailwind config and add the Preline imports, forms plugin, and theme import to src/input.css.

tailwind.config.js

													
														/** @type {import('tailwindcss').Config} */
														module.exports = {
															content: [
																'./Views/**/*.cshtml',
																'./wwwroot/**/*.html',
																'./wwwroot/**/*.js',
																'./node_modules/preline/**/*.js'
															],
															theme: {
																extend: {},
															},
															plugins: [],
														};

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 update the layout

Build the Tailwind CSS output, then load the compiled stylesheet and Preline JavaScript 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" />  <script src="~/node_modules/preline/dist/preline.js" asp-append-version="true"></script> <script> // Initialize Preline components document.addEventListener('DOMContentLoaded', function() { if (window.HSStaticMethods) { window.HSStaticMethods.autoInit(); } }); </script>
```
													
												
```
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.

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);

ASP.NET Core quick setup

Install Preline UI

Configure Tailwind CSS and create the source CSS file

Build CSS and update the layout

Optional Preline UI styles