Tailwind and Django are both high-level frameworks. Django provides the powerful backend while Tailwind is a utility-first frontend framework.
Integrate Tailwind in the Django app with a few steps:
Step 1: Install Django-Tailwind Package
First, you need to install the Django-Tailwind package via pip:
python -m pip install django-tailwind
Hot Reloading: If you want to enable automatic page reloads during development, include the [reload] extras to install the django-browser-reload package as well:
python -m pip install 'django-tailwind[reload]'
Step 2: Add Tailwind to Installed Apps
Next, add tailwind to the INSTALLED_APPS list in your settings.py
INSTALLED_APPS = [ 'tailwind', ]
Step 3: Create a Tailwind-Compatible Django App
Create a new Django app for your Tailwind CSS theme, typically named theme
python manage.py tailwind init
Step 4: Add Theme App to Installed Apps
Add your newly created theme app to the INSTALLED_APPS in settings.py
INSTALLED_APPS = ['tailwind', 'theme', ...other apps]
Step 5: Register the Theme App
Register the theme app by adding the following line in settings.py file
TAILWIND_APP_NAME = 'theme'
Step 6: Configure Internal IPs
Ensure the INTERNAL_IPS list is present in the settings.py file and contains 127.0.0.1
INTERNAL_IPS = [ "127.0.0.1", ]
Step 7: Install Tailwind CSS Dependencies
Run the following command to install Tailwind CSS dependencies
python manage.py tailwind install
Step 8: Base Template
Django Tailwind includes a basic base.html template located at your_tailwind_app_name/templates/base.html. You can extend or delete it if you already have a layout.
Step 9: Tailwind CSS Tag in Base Template
If you are not using the provided base.html, add {% tailwind_css %} to your own base.html template
{% load static tailwind_tags %}
...
<head>
...
{% tailwind_css %}
...
</head>
Example:
{% load static tailwind_tags %}
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TestApp</title>
{% tailwind_css %}
</head>
<body>
<nav class="bg-red-500 text-white">Nabvar</nav>
{% block content %} default content {% endblock %}
</body>
</html>
This tag includes Tailwind’s stylesheet.
Now for Hot Reloading,
Step 10: Add Django Browser Reload
Add and configure django_browser_reload for automatic page and CSS refreshes during development. Add it to INSTALLED_APPS in settings.py
INSTALLED_APPS = ['tailwind', 'theme', 'django_browser_reload', ...other apps]
Step 11: Middleware Configuration
Add the django_browser_reload middleware in settings.py
MIDDLEWARE = ["django_browser_reload.middleware.BrowserReloadMiddleware", ]
Note: Middleware should be added at the last in the list. Because it is only for development.
Step 12: Include Browser Reload URL
Include the django_browser_reload URL in your root url.py
urlpatterns = [ path("__reload__/", include("django_browser_reload.urls")), ]
Step 13: Start the Development Server
After that, you can use Tailwind CSS classes in your HTML. Start the development server with the following command
python manage.py tailwind start
Note: You have to use two terminals one for python manage.py tailwind start and one for python manage.py runserver
Integrating Tailwind CSS with Django makes your web development process smoother and more enjoyable. By following this guide, you've combined the power of Django's backend with Tailwind's beautiful, responsive designs. Whether you are working on personal projects or professional sites, this setup gives you a solid foundation to build amazing web applications.
Happy Coding :)