Install Preline UI with HTML + Vite using Tailwind CSS

Setting up Preline UI in a HTML + Vite project using Tailwind CSS.

Installation

Please note that the plugin has been tested with HTML and 7.1.2 version of the Vite. The framework was installed 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!

Quick HTML + Vite setup

If you haven't set up Tailwind CSS yet, check out HTML + Vite Tailwind CSS installation guides.

Some components require third-party libraries. The settings below assume full use of Preline UI, including preloaded dependencies. If you do not intend to use those components that rely on third-party libraries, you may exclude them from your configuration.

Install Preline UI

Install Preline using your preferred package manager.
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

Include Preline CSS

Include Preline in your style.css file, e.g. projects_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";

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

Add Preline JS

Include Preline on every HTML page.
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>
```
                      
                    
```
Using Preline UI

Pay attention to the quotes inside data attributes when adding them to the page with Vite.
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-gray-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-gray-200 rounded-lg overflow-hidden overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-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-gray-800 cursor-pointer hover:bg-gray-100 rounded-lg focus:outline-hidden focus:bg-gray-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 end-3 -translate-y-1/2\\"><svg class=\\"shrink-0 size-3.5 text-gray-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

Please note, Preline UI comes with some opinionated styles that are applied to components by default. If you want these styles in your project, you may include them into your CSS file. These styles used to come by default in Tailwind v3, so we decided to keep them 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);

Community Workarounds

Check out this section for community-shared tips and tricks. It's a spot for finding those handy hacks and solutions that enhance your experience with Preline UI.

NextJS 13 example

by @yoDon

Install Preline UI with HTML + Vite using Tailwind CSS

Installation

Quick HTML + Vite setup