The simplest way to integrate Tailwind CSS with Django ⚡
No Node.js required! This library provides seamless Tailwind CSS integration for Django using the standalone Tailwind CSS CLI. Inspired by the Tailwind integration for Phoenix, it eliminates the need for Node.js in your Django development workflow.
[!WARNING] Version Compatibility: 4.2.x+ supports Tailwind CSS 4.x only. For Tailwind CSS 3.x, use version 2.21.1.
# Using pip
pip install django-tailwind-cli
# Using uv (recommended)
uv add django-tailwind-cli
# Using poetry
poetry add django-tailwind-cli
Add to your settings.py:
INSTALLED_APPS = [
# ... your other apps
"django_tailwind_cli",
]
# Configure static files directory
STATICFILES_DIRS = [BASE_DIR / "assets"]
Create or update your base template (e.g., templates/base.html):
<!DOCTYPE html>
{% load tailwind_cli %}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Django App</title>
{% tailwind_css %}
</head>
<body class="bg-gray-50">
<div class="container mx-auto px-4">
{% block content %}{% endblock %}
</div>
</body>
</html>
python manage.py tailwind setup
This will guide you through the complete setup process!
# Start development server with hot reload
python manage.py tailwind runserver
# Or run build and watch separately
python manage.py tailwind watch # In one terminal
python manage.py runserver # In another terminal
Start adding Tailwind classes to your templates:
{% extends "base.html" %}
{% block content %}
<div class="max-w-4xl mx-auto py-12">
<h1 class="text-4xl font-bold text-gray-900 mb-8">
Welcome to Django + Tailwind!
</h1>
<p class="text-lg text-gray-600">
This text is styled with Tailwind CSS.
</p>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-4">
Click me!
</button>
</div>
{% endblock %}
📚 Next Steps: Check out the full documentation for advanced configuration and usage patterns.
--force flag for clean buildspython manage.py tailwind setuppython manage.py tailwind configpython manage.py tailwind list_templatespython manage.py tailwind troubleshoot{% tailwind_css %} inclusion--verbose| Command | Purpose | Example |
|---|---|---|
setup | Interactive setup guide | python manage.py tailwind setup |
build | Production CSS build | python manage.py tailwind build |
watch | Development file watcher | python manage.py tailwind watch |
runserver | Combined server + watcher | python manage.py tailwind runserver |
config | Show current configuration | python manage.py tailwind config |
troubleshoot | Debug common issues | python manage.py tailwind troubleshoot |
# settings.py
STATICFILES_DIRS = [BASE_DIR / "assets"]
# Pin specific Tailwind version
TAILWIND_CLI_VERSION = "4.1.3"
# Custom CSS paths
TAILWIND_CLI_SRC_CSS = "src/styles/main.css"
TAILWIND_CLI_DIST_CSS = "css/app.css"
# Enable DaisyUI
TAILWIND_CLI_USE_DAISY_UI = True
# Custom CLI path (for CI/CD)
TAILWIND_CLI_PATH = "/usr/local/bin/tailwindcss"
TAILWIND_CLI_AUTOMATIC_DOWNLOAD = False
# Optimized for production
TAILWIND_CLI_VERSION = "4.1.3" # Pin version
TAILWIND_CLI_AUTOMATIC_DOWNLOAD = False # Use pre-installed CLI
TAILWIND_CLI_DIST_CSS = "css/tailwind.min.css"
CSS not updating?
python manage.py tailwind build --force
python manage.py tailwind troubleshoot
Configuration problems?
python manage.py tailwind config
python manage.py tailwind setup
Missing templates?
python manage.py tailwind list_templates --verbose
python manage.py tailwind runserver for automatic rebuilds--force only when necessary--verbose for detailed loggingEnable beautiful pre-built components:
# settings.py
TAILWIND_CLI_USE_DAISY_UI = True
<!-- Use DaisyUI components -->
<button class="btn btn-primary">Primary Button</button>
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<h2 class="card-title">Card Title</h2>
<p>Card content goes here.</p>
</div>
</div>
We welcome contributions! This project uses modern Python tooling for development.
# Clone the repository
git clone https://github.com/django-commons/django-tailwind-cli.git
cd django-tailwind-cli
# Setup development environment (with just)
just bootstrap
# Or setup manually with uv
uv venv
uv sync --all-extras
# With just (recommended)
just upgrade # Update dependencies
just lint # Run linting and formatting
just test # Run test suite
just test-all # Run tests across Python/Django versions
# Without just
uv sync --all-extras # Update dependencies
uvx pre-commit run --all-files # Run linting
uv run pytest # Run tests
uvx --with tox-uv tox # Run full test matrix
git checkout -b feature/amazing-feature)just test)feat:, fix:, docs:, etc.)git push origin feature/amazing-feature)This software is licensed under MIT license.
FAQs
Django and Tailwind integration based on the prebuilt Tailwind CSS CLI.
We found that django-tailwind-cli demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.
Security News
AGENTS.md is a fast-growing open format giving AI coding agents a shared, predictable way to understand project setup, style, and workflows.
Security News
/Research
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.