Update v5.0 - Preline MCP, AI Prompts, Animated Icons and more. Visit Changelog

........ Github
Figma X (Twitter)

Install Preline UI with Express.js using Tailwind CSS

Install Preline UI with Tailwind CSS in Express.js projects, including JavaScript plugin setup, static scripts, template rendering, and optional dependencies.

Prerequisites

This guide assumes you already have an Express.js project with Tailwind CSS v4 configured. This guide focuses only on adding Preline UI to your existing setup.
Please note that this guide was verified against a project created with the standard npx express-generator --view=ejs <project-name> command (Express 4.16.x, Node.js 22). If you are using your own project structure or a different version, pay attention to the file paths and features of your version!

Express.js quick setup

Start with an Express.js application that already has Tailwind CSS configured, then add Preline UI to your existing styles, static files, and templates.

  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.

    styles/tailwind.css 
    													
														@import "tailwindcss";

														@import "preline/variants.css";
														@source "../node_modules/preline/dist/*.js";
														/* Your view templates (adjust the glob to match your view engine) */
														@source "../views/**/*.ejs";

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

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

                            /* Preline Themes */
														@import "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;
                            }
                            */

    Tailwind CSS v4's automatic content detection already scans most template files, so this @source line is not strictly required in the common case. Declaring it explicitly still keeps the build reproducible if that detection ever misses a file, for example when the templates directory is .gitignored or the CLI runs from an unexpected working directory.

    This loads Preline's default theme. To use one of the built-in preset themes instead, or generate a custom brand theme, see the Theme docs.

  3. Serve Preline assets with Express

    Avoid exposing your entire node_modules directory as a public static route. Copy just the single Preline browser bundle into the public/javascripts folder express-generator already creates, then serve it from your existing static directory, with no need to expose the rest of dist.

    Terminal 
    													
														mkdir -p public/javascripts
														cp node_modules/preline/dist/preline.js public/javascripts/preline.js
    app.js 
    													
														const express = require('express');
														const path = require('path');
														
														const app = express();
														
														// Serve static files
														app.use(express.static(path.join(__dirname, 'public')));

  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.

    views/layout.ejs 
    													
														<!DOCTYPE html>
														<html>
															<head>
																<title><%= title %></title>
																<link rel='stylesheet' href='/stylesheets/main.css' />
															</head>
															<body>
																<%- body %>

																<script src='/javascripts/preline.js'></script>
															</body>
														</html>

    The example above uses EJS, whose <% %>/<%= %> tags stay close to plain HTML. Pug and Handlebars work the same way: add the same <script> tag near the end of your shared layout's <body>, after any other framework scripts your page already loads.

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

© 2026 Preline Labs.