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.

Installation

Please note that this plugin has been tested with the latest framework version (v4.2.19). It was installed using the standard `npm create svelte@latest project-name` command.
If you’re working with a custom project setup or a different framework version, be sure to check the file paths and features specific to your version!

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.

1
Install FlyonUI
To get started, install flyonui via npm.
npm i flyonui

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 files to the projects_root_directory/ static folder.

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/flyonui.js"></script>
  </body>
</html>

5
Add a reinitialization helper
Insert the code that reinitializes components whenever the app mounts or a page is changed in projects_root_directory/ src/routes/+layout.svelte.
<script> import { afterNavigate } from "$app/navigation"; ... afterNavigate(() => { window.HSStaticMethods.autoInit(); }); </script>

Framework guides