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 latest version of the framework (v4.0.5). The framework was installed using the standard npm create svelte@latest <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.

Preline UI + Svelte

  1. Install Preline UI

    Install preline via npm or yarn. 

    // Terminal or Shellnpm install preline // or yarn add preline

  2. Configure Preline UI JavaScript paths

    Add the path to Preline UI JavaScript files in your tailwind.config.js file. 

    // tailwind.config.jsmodule.exports = {  content: [      './node_modules/preline/preline.js',  ],  plugins: [      require('preline/plugin'),  ],}

  3. Copy the Preline UI JavaScript

    Copy Preline UI JavaScript to the static projects_root_directory/static folder.

  4. Add the Preline UI JavaScript

    Include Preline UI JavaScript to the projects_root_directory/src/app.html file. 

                          
                        <!DOCTYPE html>
                        <html lang="en">
                          ...
                          <body data-sveltekit-preload-data="hover">
                            ...
                            <script src="%sveltekit.assets%/preline/preline.js"></script>
                          </body>
                        </html>

  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>
                          import { afterNavigate } from "$app/navigation";
                        
                          ...
                        
                          afterNavigate(() => {
                            window.HSStaticMethods.autoInit();
                          });
                        </script>

                        ...