Install Preline UI with Express.js using Tailwind CSS

1. Install Preline UI

   Install preline with your preferred package manager in your Express.js 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

2. Import Preline CSS and source files

   Add the Preline UI CSS variants, source path, and optional theme import to your existing CSS file.

   public/stylesheets/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";
   													
   												

   See the Theme docs to learn more about Preline Themes.

3. Serve Preline assets with Express

   Update your Express.js app to serve your existing static files and expose the Preline assets you need at runtime.

   app.js

   													
   														const express = require('express');
   														const path = require('path');
   														
   														const app = express();
   														
   														// Serve static files
   														app.use(express.static(path.join(__dirname, 'public')));
   														app.use('/node_modules', express.static(path.join(__dirname, 'node_modules')));
   													
   												

4. Load Preline UI in Express templates

   Include the Preline JavaScript file in your shared Express template, whether you use Pug, EJS, Handlebars, or another view engine.

   													
   														
   														doctype html
   															html
   																head
   																	title= title
   																	link(rel='stylesheet', href='/stylesheets/main.css')
   																body
   																	block content
   																	script(src='/node_modules/preline/dist/preline.js')
   													
   												

Specific guide

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

Optional Preline UI styles

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