• 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
    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')
  ],
}
  • 3
    Copy the FlyonUI JavaScript

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

  • 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>