Django + Tailwind CSS + Flowbite

# How to Add Tailwind CSS and Flowbite to Your Django Project 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](https://lnbg.hashnode.dev/django-for-beginners-and-beyond-a-complete-learning-path). ## 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](https://nodejs.org/en/download). And then run the below command to install the following packages using pip: ```bash 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: ```python 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: ```bash python manage.py tailwind init ``` Add the newly create `theme` to your `INSTALLED_APPS` in your `settings.py` file: ```python INSTALLED_APPS = [ # other Django apps 'tailwind', 'theme' ] ``` Register the generated `theme` app by adding the following line to `settings.py` file: ```python 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: ```python INTERNAL_IPS = [ "127.0.0.1", ] ``` Now, install *Tailwind CSS* dependencies, by running the following command: ```bash 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: ```xml {% load static tailwind_tags %} ... ... {% tailwind_css %} ... ``` 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`: ```xml 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 `` when `DEBUG` is `True.` Include `django_browser_reload` URL in your root `url.py` : ```python 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. ```bash 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: ```bash 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: 1. The stylesheet updates every time you add or remove a CSS class in a Django template. 2. `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 ```bash npm install flowbite ``` Make some desired changes in the `tailwind.config.js` file: ```javascript 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 `` tag using CDN or by including it directly from the `node_modules/` folder ```xml ``` Let’s start by adding a [Navbar component](https://flowbite.com/docs/components/navbar/) inside the `layout.html` file: ```xml {% load compress %} {% load static %} Django + Tailwind CSS + Flowbite {% compress css %} {% endcompress %}

{% block content %} {% endblock content %}

``` ## Creating a Tailwind CSS production build To create a production build of your theme, run the following command: ```bash 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: ```xml {% load tailwind_tags %} Django Tailwind {% tailwind_preload_css %} {% tailwind_css %} ``` ## Conclusion By following these steps, you have successfully integrated Tailwind CSS and Flowbite components into your Djan[go p](https://django-tailwind.readthedocs.io/en/latest/installation.html)[rojec](https://django-tailwind.readthedocs.io/en/latest/settings.html)t. Thi[s se](https://django-tailwind.readthedocs.io/en/latest/installation.html)[tup a](https://django-tailwind.readthedocs.io/en/latest/settings.html)llows 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.