Installation¶
Install django-tailwind-cli¶
Install the library.
python -m pip install "django-tailwind-cli"
Add the optional libraries
django-extensionsandWerkzeugto use the extended debug server fromdjango-extensions.python -m pip install "django-tailwind-cli[django-extensions]"
Add
django_tailwind_clitoINSTALLED_APPSinsettings.py.INSTALLED_APPS = [ # other Django apps "django_tailwind_cli", ]
If you want to use the extended debug server from
django-extensions, add the package to the installed apps.INSTALLED_APPS = [ # other Django apps "django_tailwind_cli", "django_extensions", ]
Configure the
STATICFILES_DIRSparameter in yoursettings.pyif not already configured, and make sure the referenced directory exists on disk — Django raises an error at startup if it doesn’t.STATICFILES_DIRS = [BASE_DIR / "assets"]
mkdir -p assets
Add template code.
{% load tailwind_cli %} ... <head> ... {% tailwind_css %} ... </head>
Start the debug server or start the Tailwind CLI in watch mode.
python manage.py tailwind runserver
Or
python manage.py tailwind watch
If you only start the Tailwind CLI in watch mode, you have to start the debug server with the standard command
python manage.py runserverseparately.tailwind watchruns under Django’s auto-reloader by default, so editingsettings.pyrestarts the watcher and respawns the Tailwind CLI with a fresh configuration. Pass--noreloadto disable this.The first run creates a managed directory at
<BASE_DIR>/.django_tailwind_cli/for the downloaded CLI binary and the auto-generated source CSS file. This directory is automatically git-ignored via a.gitignorefile it drops on first use — you don’t need to add anything to your project-level.gitignore.
Optional steps¶
Use a system-installed Tailwind CSS CLI¶
By default, django-tailwind-cli downloads the Tailwind CSS CLI binary on first use and caches it inside your project. If you already have tailwindcss installed through Homebrew or another package manager, you can tell the library to use that binary instead and skip the download:
# settings.py
TAILWIND_CLI_USE_SYSTEM_BINARY = True
See TAILWIND_CLI_USE_SYSTEM_BINARY for details.
Install django-browser-reload¶
If you enjoy automatic reloading during development. Install the django-browser-reload app. The following installation steps are taken from the README of the project.
Install
django-browser-reloadinside your Django project.python -m pip install django-browser-reload
Ensure you have
django.contrib.staticfilesin yourINSTALLED_APPS.Add
django_browser_reloadapp to yourINSTALLED_APPS.INSTALLED_APPS = [ ..., "django_browser_reload", ..., ]
Include the app URL’s in your root URLconf(s).
from django.urls import include, path urlpatterns = [ ..., path("__reload__/", include("django_browser_reload.urls")), ]
Add the middleware.
MIDDLEWARE = [ # ... "django_browser_reload.middleware.BrowserReloadMiddleware", # ... ]
The middleware should be listed after any that encodes the response, such as Django’s GZipMiddleware.
The middleware automatically inserts the required script tag on HTML responses before