Docs
Framework Guides
HTML + Vite

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 7.1.2. 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.

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.

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.

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/src/plugins/datepicker/styles.css"; */

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

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

See the Theme docs to learn more about Preline Themes.

Add Preline JS

Load Preline on every HTML page where its interactive components need JavaScript behavior.
index.html
<!doctype html> <html lang="en"> <head> ... </head> <body> ... <div id="app"></div> <script type="module" src="/src/main.ts"></script> <script src="/node_modules/preline/dist/preline.js"></script> </body> </html>
```
                          
                        
```
Working with data attributes

Escape quotes carefully inside data-* attributes when rendering component markup through Vite template strings.
main.ts
import './style.css' document.querySelector<HTMLDivElement>('#app')!.innerHTML = ` <form> <select data-hs-select='{ "placeholder": "Select option...", "toggleTag": "<button type=\\"button\\" aria-expanded=\\"false\\"></button>", "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-3 ps-4 pe-9 flex gap-x-2 text-nowrap w-full cursor-pointer bg-white border border-stone-200 rounded-lg text-start text-sm focus:outline-hidden focus:ring-2 focus:ring-blue-500 dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:focus:outline-hidden dark:focus:ring-1 dark:focus:ring-neutral-600", "dropdownClasses": "mt-2 z-50 w-full max-h-72 p-1 space-y-0.5 bg-white border border-stone-200 rounded-lg overflow-hidden overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-stone-100 [&::-webkit-scrollbar-thumb]:bg-stone-300 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900 dark:border-neutral-700", "optionClasses": "py-2 px-4 w-full text-sm text-stone-800 cursor-pointer hover:bg-stone-100 rounded-lg focus:outline-hidden focus:bg-stone-100 hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:text-neutral-200 dark:focus:bg-neutral-800", "optionTemplate": "<div class=\\"flex justify-between items-center w-full\\"><span data-title></span><span class=\\"hidden hs-selected:block\\"><svg class=\\"shrink-0 size-3.5 text-blue-600 dark:text-blue-500 \\" xmlns=\\"http:.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\"><polyline points=\\"20 6 9 17 4 12\\"/></svg></span></div>", "extraMarkup": "<div class=\\"absolute top-1/2 inset-e-3 -translate-y-1/2\\"><svg class=\\"shrink-0 size-3.5 text-stone-500 dark:text-neutral-500 \\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\"><path d=\\"m7 15 5 5 5-5\\"/><path d=\\"m7 9 5-5 5 5\\"/></svg></div>" }' class="hidden"> <option value="">Choose</option> <option>Name</option> <option disabled="">Disabled</option> <option>Description</option> <option>User ID</option> </select> </form> `
```
                          
                        
```

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

Specific guide

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

HTML + Vite

Using Preline UI with HTML + Vite

Use Preline UI JavaScript plugins in HTML + Vite projects, including auto entries, non-auto imports, manual instances, cleanup, and optional dependencies.

View guide