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

Icons

For icons setup you can refer Icons page.