Installation

Install django-tailwind-cli

  1. Install the library.

    python -m pip install "django-tailwind-cli"
    

    Add the optional libraries django-extensions and Werkzeug to use the extended debug server from django-extensions.

    python -m pip install "django-tailwind-cli[django-extensions]"
    
  2. Add django_tailwind_cli to INSTALLED_APPS in settings.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",
    ]
    
  3. Configure the STATICFILES_DIRS parameter in your settings.py if 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
    
  4. Add template code.

    {% load tailwind_cli %}
    ...
    <head>
      ...
      {% tailwind_css %}
      ...
    </head>
    
  5. 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 runserver separately.

    tailwind watch runs under Django’s auto-reloader by default, so editing settings.py restarts the watcher and respawns the Tailwind CLI with a fresh configuration. Pass --noreload to disable this.

  6. 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 .gitignore file 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.

  1. Install django-browser-reload inside your Django project.

    python -m pip install django-browser-reload
    
  2. Ensure you have django.contrib.staticfiles in your INSTALLED_APPS.

  3. Add django_browser_reload app to your INSTALLED_APPS.

    INSTALLED_APPS = [
        ...,
        "django_browser_reload",
        ...,
    ]
    
  4. Include the app URL’s in your root URLconf(s).

    from django.urls import include, path
    
    urlpatterns = [
        ...,
        path("__reload__/", include("django_browser_reload.urls")),
    ]
    
  5. 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 when DEBUG is True. It does so to every HTML response, meaning it will be included on Django’s debug pages, admin pages, etc. If you want more control, you can instead insert the script tag in your templates—see below.