• Set up FlyonUI with 11ty using Tailwind CSS

Set up FlyonUI with 11ty using Tailwind CSS

Integrate FlyonUI with 11ty and Tailwind CSS to build a modern, responsive UI, streamlining your development process with ease.

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

Quick 11ty setup

11ty is a simple and versatile static site generator written in JavaScript that transforms templates and data into HTML pages. If you haven't set up Tailwind CSS yet, check out 11ty Tailwind CSS installation guides.

FlyonUI + 11ty Checkout the Starter Kit
  • 1
    Install FlyonUI

    Install flyonui via npm.

    npm i flyonui
  • 2
    Add FlyonUI plugin

    Include FlyonUI plugin in your main.css file.

    @import "tailwindcss";
@plugin "flyonui";
@import "flyonui/variants.css";
@source "../node_modules/flyonui/flyonui.js"; // Add only if node_modules is gitignored

/* Import Third-party override css */
/* @import "flyonui/src/vendor/flatpickr.css"; */
/* @import "flyonui/src/vendor/notyf.css"; */
/* @import "flyonui/src/vendor/datatables.css"; */
/* @import "flyonui/src/vendor/editor.css"; */
/* @import "flyonui/src/vendor/fullcalendar.css"; */
/* @import "flyonui/src/vendor/raty.css"; */
/* @import "flyonui/src/vendor/waves.css"; */
/* @import "flyonui/src/vendor/apexcharts.css"; */
  • 3
    Update `eleventy.config.mjs` to copy FlyonUI Javascript

    Copy FlyonUI Javascript.

    export default function (eleventyConfig) {
  // Copy flyonUI JS
  eleventyConfig.addPassthroughCopy({
    "node_modules/flyonui/flyonui.js": "vendor/flyonui/flyonui.js"
  });

  ...
}
  • 3
    Add the FlyonUI JavaScript

    Include FlyonUI JavaScript to the root_directory/src/layouts/default.njk file.

    ---
title: My Blog
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
    <link rel="stylesheet" href="/styles/index.css">
  </head>
  <body class="prose">
    {{ content | safe }}

  <!-- FlyonUI JS -->
  <script src="/vendor/flyonui/flyonui.js"></script>  
  </body>
</html>

Icons

For icons setup you can refer Icons page.