Integrate Tailwind CSS & Flowbite in Django

Django is a strong web framework that helps developers create solid web apps. To improve the look and user interface of your Django project, you can add Tailwind CSS and Flowbite components. This guide will show you how to add Tailwind CSS, turn on Tailwind's JIT (Just-In-Time) mode for live reloading, and use Flowbite components. To begin with Django installation and setup, refer here.

Install the Django Tailwind package via pip:

To add Tailwind CSS to your Django project, you'll need to have a Node.js and NPM installed on your system. If you haven't already, install Node.js and NPM (Node Package Manager). You can install Node.js from here. And then run the below command to install the following packages using pip:

pip install django-tailwind
pip install 'django-tailwind[reload]'

This will install the django-tailwind package and the django-tailwind[reload] package, which includes the tailwind-django command-line tool.

Once you have installed Tailwind CSS, you can use the tailwind-django command to generate the necessary files for your project. This command will create a tailwind.config.js file in your project directory, as well as a static/css/tailwind.css file that contains the compiled Tailwind CSS.

Now, add tailwind to your INSTALLED_APPS in your settings.py file:

INSTALLED_APPS = [
  # other Django apps
  'tailwind',
]

Next, run the below command to create a Tailwind CSS compatible Django app, I’d like to call it theme. Customize with your own names:

python manage.py tailwind init

Add the newly create theme to your INSTALLED_APPS in your settings.py file:

INSTALLED_APPS = [
  # other Django apps
  'tailwind',
  'theme'
]

TAILWIND_APP_NAME = 'theme'

Make sure that the INTERNAL_IPS list is present in the settings.py file and contains the 127.0.0.1 IP address:

INTERNAL_IPS = [
    "127.0.0.1",
]

Now, install Tailwind CSS dependencies, by running the following command:

python manage.py tailwind install

The django-tailwind package comes with a simple base.html template located at your_tailwind_app_name/templates/base.html. You can always extend or delete it if you already have a layout. If you are not using the base.html template that comes with django-tailwind, you can configure by adding the below lines in choice of your template:

{% load static tailwind_tags %}
...
<head>
   ...
   {% tailwind_css %}
   ...
</head>

The {% tailwind_css %} tag includes Tailwind’s stylesheet.

Let’s also add and configure django_browser_reload, which takes care of automatic page and CSS refreshes in the development mode. Add it to INSTALLED_APPS in settings.py:

INSTALLED_APPS = [
  # other Django apps
  'tailwind',
  'theme',
  'django_browser_reload'
]

The middleware should be listed after any that encode the response, such as Django’s GZipMiddleware. The middleware automatically inserts the required script tag on HTML responses before </body> when DEBUG is True.

Include django_browser_reload URL in your root url.py :

from django.urls import include, path

urlpatterns = [
    ...,
    path("__reload__/", include("django_browser_reload.urls")),
]

include this at the end of all the paths.

Now, finally to render the tailwind in your project you need to configure an last step that is to include the path of NPM. That’s because this app needs node.js to be installed in your system. And you need to provide the path to the node.js executable in your settings.py file: You can use command where node to find the path to the node.js executable.

NPM_BIN_PATH = 'npm.cmd' # For Windows

NPM_BIN_PATH = '/usr/local/bin/npm' # For MacOS and linux

Now, all the steps are completed to start Django Tailwind in development mode, run the following command in a terminal to get started:

python manage.py tailwind start

This will start a long-running process that monitors files for changes. Use CTRL + C to stop the process.

Here's what's happening behind the scenes:

The stylesheet updates every time you add or remove a CSS class in a Django template.
django-browser-reload watches for changes in HTML and CSS files. When a Django template or CSS is updated, the browser refreshes them automatically. This provides a smooth development experience without needing to reload the page to see updates.

Installing Tailwind CSS Django - Flowbite

Now that we have successfully installed Tailwind CSS, if we want to implement or use some components, we can use the Flowbite component library to do so. Below are the given steps to get stated with the Flowbite:

Install Flowbite as a dependency using NPM

npm install flowbite

Make some desired changes in the tailwind.config.js file:

module.exports = {
  content: [
      './templates/**/*.html',
      './node_modules/flowbite/**/*.js'
  ],
  theme: {
    extend: {},
  },
  plugins: [
      require('flowbite/plugin')
  ]
}

Include Flowbite’s JavaScript file inside the layout.html file just before the end of the <body> tag using CDN or by including it directly from the node_modules/ folder

<script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.js"></script>

Let’s start by adding a Navbar component inside the layout.html file:

{% load compress %}
{% load static %}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Django + Tailwind CSS + Flowbite</title>

    {% compress css %}
    <link rel="stylesheet" href="{% static 'src/output.css' %}">
    {% endcompress %}

</head>

<body class="bg-green-50">

    <!-- Add this -->
    <nav class="bg-green-50 border-gray-200 px-2 sm:px-4 py-2.5 rounded-sm dark:bg-gray-800">
        <div class="container flex flex-wrap items-center justify-between mx-auto">
          <a href="{{ .Site.Params.homepage }}/" class="flex items-center">
              <img src="/docs/images/logo.svg" class="h-6 mr-3 sm:h-9" alt="Flowbite Logo" />
              <span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Flowbite Django</span>
          </a>
          <button data-collapse-toggle="mobile-menu" type="button" class="inline-flex items-center p-2 ml-3 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="mobile-menu" aria-expanded="false">
            <span class="sr-only">Open main menu</span>
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
            <svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </button>
          <div class="hidden w-full md:block md:w-auto" id="mobile-menu">
            <ul class="flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium">
              <li>
                <a href="#" class="block py-2 pl-3 pr-4 text-white bg-green-700 rounded-sm md:bg-transparent md:text-green-700 md:p-0 dark:text-white" aria-current="page">Home</a>
              </li>
              <li>
                <a href="#" class="block py-2 pl-3 pr-4 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-green-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">About</a>
              </li>
              <li>
                <a href="#" class="block py-2 pl-3 pr-4 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-green-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Services</a>
              </li>
              <li>
                <a href="#" class="block py-2 pl-3 pr-4 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-green-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Pricing</a>
              </li>
              <li>
                <a href="#" class="block py-2 pl-3 pr-4 text-gray-700 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-green-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Contact</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    <!-- End of new HTML -->

    <div class="container mx-auto mt-4">
        {% block content %}
        {% endblock content %}
    </div>

    <script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.js"></script>
</body>

</html>

Creating a Tailwind CSS production build

To create a production build of your theme, run the following command:

python manage.py tailwind build

{% tailwind_preload_css %} tag is used to replace the development build with a bundle optimized for production. The tag generates a preload directive for your stylesheet, which improves loading performance in production. Place it above the {% tailwind_css %} tag:

{% load tailwind_tags %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Django Tailwind</title>
    {% tailwind_preload_css %}
    {% tailwind_css %}
  </head>
  <body></body>
</html>

Conclusion

By following these steps, you have successfully integrated Tailwind CSS and Flowbite components into your Django p roject. This se tup allows you to leverage the power of Tailwind's utility-first CSS and Flowbite's pre-designed components to create a visually appealing and responsive web application.

How to Add Tailwind CSS and Flowbite to Your Django Project

Install the Django Tailwind package via pip:

Installing Tailwind CSS Django - Flowbite

Creating a Tailwind CSS production build

Conclusion