2. Frameworks
  3. Svelte

Installation

Install Preline UI with Svelte using Tailwind CSS

Setting up Preline UI in a Svelte project using Tailwind CSS.

Installation

Please note that the plugin has been tested with the 5.0.0 version of the framework. The framework was installed using the standard npx sv create <project-name> 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 Svelte setup

Svelte is a JS framework for building fast, efficient web apps. If you haven't set up Tailwind CSS yet, check out SvelteKit 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.

  1. Install Preline UI

    Install Preline using your preferred package manager. 

                        
                      npm install preline

  2. Include Preline CSS

    Include Preline in your projects_root_directory/src/app.css file. 

                        
                      @import "tailwindcss";

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

                      /* Optional plugins */
                      /* @import "preline/src/plugins/datepicker/styles.css"; */

                      /* Third-party plugins */
                      /* @plugin "@tailwindcss/forms"; */
                      /* @plugin "@tailwindcss/aspect-ratio"; */

                      ...

  3. Add type definitions for Preline

    Create the app.d.ts file in the project root directory, e.g. projects_root_directory/src/app.d.ts 

                        
                      import type { IStaticMethods } from "preline/dist";

                      declare global {
                        interface Window {
                          // Optional plugins
                          _;
                          $: typeof import("jquery");
                          jQuery: typeof import("jquery");
                          DataTable;
                          Dropzone;
                          VanillaCalendarPro;

                          // Preline UI
                          HSStaticMethods: IStaticMethods;
                        }

                        namespace App {
                          ...
                        }
                      }

                      export {};

  4. Add the Preline UI JavaScript

    Add the Preline UI JavaScript in your app entry point projects_root_directory/src/lib/client/init.ts 

                        
                      // Optional plugins
                      import $ from "jquery";
                      import _ from "lodash";
                      import noUiSlider from "nouislider";
                      import "datatables.net";
                      import "dropzone/dist/dropzone-min.js";
                      import * as VanillaCalendarPro from "vanilla-calendar-pro";

                      window._ = _;
                      window.$ = $;
                      window.jQuery = $;
                      window.DataTable = $.fn.dataTable;
                      window.noUiSlider = noUiSlider;
                      window.VanillaCalendarPro = VanillaCalendarPro;

                      // Preline UI
                      import("preline/dist");

    Add the Preline UI Hook projects_root_directory/src/hooks.client.ts 

                        
                      import "./lib/client/init";

  5. Add a reinitialization helper

    Add code that reinitializes the components every time when app is mounted or page was changed projects_root_directory/src/routes/+layout.svelte 

                          
                        <script lang="ts">
                          import { afterNavigate } from "$app/navigation";
                        
                          ...
                        
                          afterNavigate(() => {
                            window.HSStaticMethods.autoInit();
                          });
                        </script>

                        ...

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. 

                  
                    /* 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

Passing parameters via data attributes. Note how the object with parameters is enclosed in curly braces and how slashes are escaped.