DEV Community

Cover image for Connect django with tailwind css
Shashwat Pritish
Shashwat Pritish

Posted on

Connect django with tailwind css

#tailwindcss #django #python #webdev

This guide will help you integrate TailwindCSS into your Django
project using the popular package django-tailwind.

Step 1: Install Required Packages

First, install django-tailwind and its dependencies:

pip install django-tailwind
pip install django-browser-reload
Enter fullscreen mode Exit fullscreen mode

Step 2: Add to INSTALLED_APPS

Open your settings.py and add:

INSTALLED_APPS = [
    ...
    'tailwind',
    'theme',
    'django_browser_reload',
]
Enter fullscreen mode Exit fullscreen mode

Also add this middleware:

MIDDLEWARE = [
    ...
    "django_browser_reload.middleware.BrowserReloadMiddleware",
]
Enter fullscreen mode Exit fullscreen mode

Step 3: Create Tailwind App

Run this command:

python manage.py tailwind init theme
Enter fullscreen mode Exit fullscreen mode

This creates a new Django app named theme that contains Tailwind
configuration.

Then navigate to the theme directory:

cd theme
Enter fullscreen mode Exit fullscreen mode

Step 4: Install Node Dependencies

Inside the theme folder, run:

npm install
Enter fullscreen mode Exit fullscreen mode

This installs Tailwind and all required frontend dependencies.

Step 5: Configure Tailwind

Open the tailwind.config.js and update the content section:

module.exports = {
  content: [
    "../../templates/**/*.{html,js}",
    "../../**/templates/**/*.{html,js}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};
Enter fullscreen mode Exit fullscreen mode

Step 6: Start Tailwind Watcher

Now run Tailwind in dev mode:

python manage.py tailwind start
Enter fullscreen mode Exit fullscreen mode

This will compile CSS automatically whenever you edit your template
files.

Step 7: Load Tailwind CSS in Template

In your base template:

{% load static %}
<link href="{% static 'theme/css/dist/styles.css' %}" rel="stylesheet">
Enter fullscreen mode Exit fullscreen mode

Step 8: Enable Live Reload (Optional but Recommended)

Add to your urls.py:

from django.urls import path, include

urlpatterns = [
    ...
    path("__reload__/", include("django_browser_reload.urls")),
]
Enter fullscreen mode Exit fullscreen mode

And in your base template, just before </body>:

{% if debug %}
<script src="http://localhost:3000/browser-sync/browser-sync-client.js"></script>
{% endif %}
Enter fullscreen mode Exit fullscreen mode

Done!

You have successfully integrated Django + TailwindCSS using
django-tailwind.

Now you can use Tailwind classes directly inside your Django templates
to build beautiful UI faster.

Happy coding!

Top comments (0)