Install Preline UI with Svelte using Tailwind CSS

1. Install Preline UI

   Install preline with your preferred package manager.

   Terminal

                             
                               npm install preline
                             
                           

2. Include Preline CSS

   Import Preline into your project's Tailwind CSS entry file. If you scaffolded Tailwind with npx sv add tailwindcss, that file is projects_root_directory/src/routes/layout.css (imported once from the root +layout.svelte); if you added Tailwind manually via the SvelteKit + Tailwind CSS guide, it's projects_root_directory/src/app.css instead. The @source path below is relative to that file's own location, so adjust the number of ../ segments to match how deep it actually sits from your project root. For example, src/routes/layout.css needs one more ../ than src/app.css does.

   layout.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";
   
                               /* 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;
                               }
                               */
                             
                           

   See the Theme docs to learn more about Preline Themes.

3. Declare and load optional plugin dependencies

   HSStaticMethods and every plugin class are already typed by the package itself under preline/non-auto, so nothing needs to be declared for Preline UI directly. A handful of plugins depend on a third-party library that isn't bundled: Datatable needs jquery and datatables.net-dt, Datepicker needs vanilla-calendar-pro (and lodash), Range Slider needs nouislider, and File Upload needs dropzone. Only install and declare the ones the plugins you actually use need.

   Terminal

                             
                               npm install jquery lodash nouislider dropzone datatables.net-dt vanilla-calendar-pro
                               npm install -D @types/jquery @types/lodash @types/dropzone
                             
                           

   nouislider, datatables.net-dt, and vanilla-calendar-pro ship their own TypeScript types, so no @types/ package is needed for those three. Put the imports, the declare global typings, and the window assignments in one module, for example projects_root_directory/src/lib/vendor-globals.ts.

   vendor-globals.ts

                             
                               import $ from "jquery";
                               import DataTable from "datatables.net-dt";
                               import _ from "lodash";
                               import { Calendar } from "vanilla-calendar-pro";
                               import noUiSlider from "nouislider";
                               import Dropzone from "dropzone";
   
                               declare global {
                                 interface Window {
                                   // Only declare the ones the plugins you actually use need
                                   $: typeof $;
                                   jQuery: typeof $;
                                   DataTable: typeof DataTable;
                                   _: typeof _;
                                   VanillaCalendarPro: typeof Calendar;
                                   noUiSlider: typeof noUiSlider;
                                   Dropzone: typeof Dropzone;
                                 }
                               }
   
                               window.$ = $;
                               window.jQuery = $;
                               window.DataTable = DataTable;
                               window._ = _;
                               window.VanillaCalendarPro = Calendar;
                               window.noUiSlider = noUiSlider;
                               window.Dropzone = Dropzone;
                             
                           

   This module has to finish running before Preline UI scans the page, or a plugin whose dependency check runs at that scan will silently no-op. The next step imports it first, then loads Preline UI.

4. Initialize Preline UI, and reinitialize on navigation

   SvelteKit routes client-side by default, so a page load only happens once, and navigating between routes swaps the content inside your root layout without reloading the document. Run Preline UI's scan in afterNavigate (from $app/navigation) in projects_root_directory/src/routes/+layout.svelte instead of a one-time onMount: it fires on the initial load as well as every later navigation, so one hook covers both cases. Import vendor-globals before preline/non-auto so any optional dependency is on window before Preline UI's own dependency checks run. A navigation counter guards against a slower-resolving import from an earlier navigation landing after a newer one already finished, which would otherwise rerun the scan a second time and reset whatever the user is now looking at.

   +layout.svelte

                             
                               <script lang="ts">
                                 import { afterNavigate } from "$app/navigation";
   
                                 ...
   
                                 let navigationToken = 0;
   
                                 afterNavigate(async () => {
                                   const token = ++navigationToken;
   
                                   await import("$lib/vendor-globals");
                                   const { HSStaticMethods } = await import("preline/non-auto");
   
                                   if (token !== navigationToken) return;
   
                                   HSStaticMethods.cleanCollection();
                                   HSStaticMethods.autoInit();
                                 });
                               </script>
   
                               ...
                             
                           

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

Hints and tips

Specific guide

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