• Set up FlyonUI with Qwik using Tailwind CSS

Set up FlyonUI with Qwik using Tailwind CSS

Combine FlyonUI with Qwik and Tailwind CSS to build a sleek, responsive interface, optimizing your development workflow for greater efficiency.

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

Quick Qwik setup

Qwik is an instant-loading framework with minimal overhead. If you haven't set up Tailwind CSS yet, check out Qwik Tailwind CSS installation guides.

FlyonUI + Qwik Explore playground demo on StackBlitz
  • 1
    Install FlyonUI

    Install flyonui via npm.

    npm i flyonui
  • 2
    Configure FlyonUI JavaScript paths

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

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

    Note: If you want to include specific js component

    // tailwind.config.ts
module.exports = {
  content: [
    './node_modules/flyonui/dist/js/accordion.js', // Specific JS component
  ]
};
  • 3
    Add the FlyonUI JavaScript

    Include FlyonUI JavaScript to the root_directory/src/root.tsx file.

    import { component$ } from "@builder.io/qwik";
import {
  QwikCityProvider,
  ...
} from "@builder.io/qwik-city";
...

export default component$(() => {
  return (
    <QwikCityProvider>
      ...
      <body>
        ...
        <script src="../node_modules/flyonui/flyonui.js"></script>
      </body>
    </QwikCityProvider>
  );
});

    Note: If you want to include specific js component

    ...
<script src="../node_modules/flyonui/dist/js/accordion.js"></script> // Add particular component JS
...