• Setup FlyonUI with Svelte using Tailwind CSS.

Setup FlyonUI with Svelte using Tailwind CSS.

Configuring FlyonUI within a Svelte project while incorporating Tailwind CSS for enhanced styling.

https://cdn.flyonui.com/fy-assets/icons/svelte-icon.png
svelte logo

Quick Svelte setup

Svelte is a powerful JavaScript framework designed for building fast, efficient web applications. If you haven't configured Tailwind CSS yet, refer to the SvelteKit Tailwind CSS installation guide.

FlyonUI + Svelte Check out the demo on StackBlitz
  • 1
    Install FlyonUI

    To get started, install flyonui via npm.

    npm i flyonui
  • 2
    Configure FlyonUI JavaScript paths

    Add FlyonUI JavaScript paths to your tailwind.config.js file.

    // tailwind.config.js
module.exports = {
  content: [
    './node_modules/flyonui/dist/js/*.js'
  ],
  plugins: [
    require('flyonui'), 
    require('flyonui/plugin')
  ],
}
  • 3
    Copy the FlyonUI JavaScript

    Copy FlyonUI's JavaScript (node_modules/flyonui/flyonui.js) files to the projects_root_directory/ static folder.

  • 4
    Add the FlyonUI JavaScript

    Include FlyonUI JavaScript in the projects_root_directory/src/app.html file.

    <!DOCTYPE html>
<html lang="en">
  ...
  <body data-sveltekit-preload-data="hover">
    ...
    <script src="%sveltekit.assets%/flyonui.js"></script>
  </body>
</html>
  • 5
    Add a reinitialization helper

    Insert the code that reinitializes components whenever to ensure that FlyonUI.js is reinitialized after any DOM updates and navigation events changes in projects_root_directory/src/routes/+layout.svelte.

    <script>
  import { afterNavigate } from "$app/navigation";

  afterNavigate(() => {
    // Runs after navigating between pages
    HSStaticMethods.autoInit();
  });
</script>