Install Preline UI with Express.js using Tailwind CSS

1. Install Preline UI

   Install preline and the required forms plugin via npm in your Express.js project directory.

   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. Add Preline UI to CSS

   Add Preline UI imports 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";
   							
   						

   Check out the Theme docs to learn more about Preline Themes.

3. Configure Express.js Static Files

   Update your Express.js app to serve static files and node_modules for Preline JavaScript.

   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. Add Preline JavaScript to Express Templates

   Include Preline JavaScript in your Express.js template (Jade/Pug, EJS, Handlebars).

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

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