2. Frameworks
  3. ASP.NET Core

Installation

Install Preline UI with ASP.NET Core using Tailwind CSS

Setting up Preline UI in an ASP.NET Core project using Tailwind CSS.

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.

logo_NETcore

Quick ASP.NET Core setup

Integrate Preline UI components with your ASP.NET Core MVC project using Tailwind CSS. This guide focuses on adding Preline UI to an ASP.NET Core project.

  1. Install Preline UI

    Install preline via npm or yarn.

    Terminal 
    							
								npm install preline

    Please note, Preline UI uses Tailwind CSS Forms plugin in all form components. Don't forget to install it, if you haven't done so already: npm install -D @tailwindcss/forms

  2. Configure Tailwind CSS and Create CSS File

    Create Tailwind configuration and CSS file with Preline UI imports for your ASP.NET Core project.

    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.

  3. Build CSS and Update Layout

    Build Tailwind CSS and update your ASP.NET Core layout to include Preline CSS and JavaScript.

    Terminal 
    						
							npx @tailwindcss/cli -i ./src/input.css -o ./wwwroot/css/tailwind.css
    Views/Shared/_Layout.cshtml

    Development Workflow: Run the CSS build command whenever you make changes to your CSS. For development, you can use npx @tailwindcss/cli -i ./src/input.css -o ./wwwroot/css/tailwind.css --watch to watch for CSS changes.

Optional Preline UI Styles

Please note, Preline UI comes with some opinionated styles that are applied to components by default. If you want these styles in your project, you may include them into your CSS file. These styles used to come by default in Tailwind v3, so we decided to keep them 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);