• Set up FlyonUI with Astro using Tailwind CSS

Set up FlyonUI with Astro using Tailwind CSS

Integrate FlyonUI with Astro and Tailwind CSS to build a modern, responsive UI, optimizing your development process for efficiency.

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

Quick Astro setup

Astro is the all-in-one web framework designed for speed. If you haven't set up Tailwind CSS yet, check out Astro Tailwind CSS installation guides.

FlyonUI + Astro 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

    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/layouts/Layout.astro file.

    <!DOCTYPE html>
<html lang="en">
  ...
</html>

<script is:inline src="../node_modules/flyonui/flyonui.js"></script>

    Note: If you want to include specific js component

    <script is:inline src="../node_modules/flyonui/dist/js/accordion.js"></script>    // Specific JS component