• Set up FlyonUI with Django using Tailwind CSS

Set up FlyonUI with Django using Tailwind CSS

Integrate FlyonUI with Django and Tailwind CSS to create a responsive, modern interface and streamline your project's design.

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

Quick Django setup

Django is a progressive Python framework. If you haven't set up Tailwind CSS yet, refer to the Django Tailwind CSS installation guides.

  • 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 (node_modules/flyonui/flyonui.js) files 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="{% static 'js/flyonui.js' %}"></script>
  </body>
</html>