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

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

Install Preline UI with HTML + Vite using Tailwind CSS

Install Preline UI with Tailwind CSS in HTML + Vite projects, including JavaScript plugin setup, Vite configuration, page scripts, and optional dependencies.

Installation

Please note that the plugin has been tested with HTML and Vite 8.2.1. The project was created using the npm create vite@latest <project name> -- --template vanilla-ts command.
If you are using your own project structure or a different version, pay attention to the file paths and features of your version!

HTML + Vite quick setup

If Tailwind CSS is not set up yet, start with the official HTML + Vite Tailwind CSS guide first.

Preline UI + HTML + Vite

Some components rely on third-party libraries. The setup below assumes full use of Preline UI, including those optional dependencies. If you do not need those components, you can trim the related packages and configuration.

  1. Install Preline UI

    Install preline with your preferred package manager.

    Terminal 
                              
                            npm install preline

    Preline UI uses the Tailwind CSS Forms plugin across form components. If you have not added it yet, install it with npm install -D @tailwindcss/forms.

  2. Include Preline CSS

    Import Preline into your style.css file, for example project_root_directory/src/style.css.

    style.css 
                              
                            @import "tailwindcss";

                            @import "preline/variants.css";
                            @source "../node_modules/preline/dist/*.js";

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

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

                            /* Preline Themes */
                            @import "preline/theme.css";

    See the Theme docs to learn more about Preline Themes.

  3. Add Preline JS

    Load Preline through your Vite entry script, not a raw <script src="/node_modules/..."> tag. Vite only resolves and bundles assets that are reached through a module import (or a type="module" script/<link>), so a plain script tag pointing into node_modules works only by accident during vite dev and 404s once vite build runs, since the build never copies node_modules into the output.

    index.html
    src/main.ts

    preline/non-auto exports the same plugin classes and HSStaticMethods as the default preline entry, without registering its own window load listener, so nothing initializes until this code calls autoInit() explicitly. A bare import "preline" also works and self-invokes on load on its own, but non-auto plus an explicit call keeps initialization timing visible in your own code, which matters once a later step in this page needs to re-scan markup that Vite adds to the DOM after the page has already loaded. DOMContentLoaded is the better event to wait for in your own call: it fires as soon as this module has run, without waiting on images or other resources that have nothing to do with Preline finding the markup.

  4. Working with data attributes

    Escape quotes carefully inside data-* attributes when rendering component markup through Vite template strings.

    main.ts

    This innerHTML assignment runs as regular script code, not through Vite's HTML processing, so the <select> it inserts doesn't exist in the DOM at DOMContentLoaded time and won't be picked up by the previous step's auto-init call. Call HSStaticMethods.autoInit() again after inserting the markup:

    main.ts

Optional Preline UI styles

Preline UI ships with a small set of opinionated base styles that can be applied to components by default. If you want those defaults in your project, include them in your CSS. These styles shipped by default in Tailwind CSS v3, so they remain 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.