• Set up FlyonUI with Flask using Tailwind CSS

Set up FlyonUI with Flask using Tailwind CSS

Integrate FlyonUI with Flask and Tailwind CSS to build a modern, responsive interface and simplify the design process for your project.

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

Quick Flask setup

Flask is a lightweight and fast Python framework commonly used for building small to medium-sized projects.

  • 1
    Install FlyonUI

    Install flyonui via npm.

    npm i flyonui
  • 2
    Add FlyonUI plugin

    Include FlyonUI plugin in your static/main.css file.

    // main.css
@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
    Copy the FlyonUI JavaScript

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

    cp node_modules/flyonui/flyonui.js static/js/flyonui.js
  • 4
    Add Js to you base.html

    Once you copied the js file to your static folder include it in base.html.

    <html lang="en">
  ...
  <body>
    ...
    <script src="{{url_for('static', filename='js/flyonui.js')}}"></script>
  </body>
</html>

Icons

For icons setup you can refer Icons page.