{"id":7180,"library":"django-tailwind","title":"Django Tailwind","description":"The django-tailwind library integrates the Tailwind CSS framework seamlessly into Django projects. It provides management commands to install, build, and serve Tailwind CSS, streamlining frontend development within a Django context. It is actively maintained with frequent releases, currently at version 4.4.2.","status":"active","version":"4.4.2","language":"en","source_language":"en","source_url":"https://github.com/timonweb/django-tailwind","tags":["django","tailwind","css","frontend","build","static","npm","nodejs"],"install":[{"cmd":"pip install django-tailwind","lang":"bash","label":"Install package"}],"dependencies":[],"imports":[{"note":"Required in settings.py for management commands and template tags.","symbol":"django_tailwind","correct":"INSTALLED_APPS = ['django_tailwind', ...]"},{"note":"Required in settings.py to specify the Django app hosting Tailwind's static files.","symbol":"TAILWIND_APP_NAME","correct":"TAILWIND_APP_NAME = 'theme'"},{"note":"Required in Django templates to use Tailwind's template tags.","symbol":"tailwind_tags","correct":"{% load tailwind_tags %}"},{"note":"Required in Django templates (typically base.html) to link the generated Tailwind CSS.","symbol":"tailwind_css","correct":"{% tailwind_css %}"}],"quickstart":{"code":"# settings.py\nINSTALLED_APPS = [\n # ... your other apps\n 'django_tailwind',\n 'theme', # Your Tailwind app name\n]\n\nTAILWIND_APP_NAME = 'theme'\n\n# urls.py (your project's main urls.py)\nfrom django.contrib import admin\nfrom django.urls import path, include\n\nurlpatterns = [\n path('admin/', admin.site.urls),\n path('', include('django_tailwind.urls')),\n # ... your other url patterns\n]\n\n# Your Tailwind app (e.g., 'theme/apps.py')\n# Make sure to define your Tailwind app as a Django app\n# For example:\n# from django.apps import AppConfig\n# class ThemeConfig(AppConfig):\n# default_auto_field = 'django.db.models.BigAutoField'\n# name = 'theme'\n\n# In your base template (e.g., templates/base.html)\n# Make sure to create a templates directory in your 'theme' app\n# and an input.css in 'theme/static_src/input.css'\n# {% load tailwind_tags %}\n# \n# My Django Tailwind App\n# {% tailwind_css %}\n# \n# \n# Hello Tailwind!
\n# \n\n# Terminal commands\n# python manage.py tailwind install\n# python manage.py tailwind start\n# (Open browser to your Django app, check console for Tailwind CSS build output)","lang":"python","description":"To quickly get started, add `django_tailwind` and your designated Tailwind app (e.g., 'theme') to `INSTALLED_APPS`, define `TAILWIND_APP_NAME`, include `django_tailwind.urls` in your project's `urls.py`, and use `{% tailwind_css %}` in your base template. Then, run `python manage.py tailwind install` to set up Node.js dependencies and `python manage.py tailwind start` for development."},"warnings":[{"fix":"Review your `settings.py` for renamed variables. Ensure `TAILWIND_APP_NAME` is configured before running `python manage.py tailwind install`.","message":"Version 4.0 introduced several breaking changes including renaming `TAILWIND_CSS_PATH` to `TAILWIND_INPUT_CSS_PATH`, removing `TAILWIND_POSTCSS_OPTIONS` and `TAILWIND_NPM_PATH`, and requiring `TAILWIND_APP_NAME` to be set before `tailwind install`.","severity":"breaking","affected_versions":"4.0.0 and above"},{"fix":"Install Node.js and npm for your operating system. Verify installation by running `node -v` and `npm -v` in your terminal.","message":"django-tailwind requires Node.js and npm to be installed on your system for the Tailwind CLI to function correctly. These are not Python dependencies and must be installed separately.","severity":"gotcha","affected_versions":"All versions"},{"fix":"Ensure `TAILWIND_APP_NAME = 'your_app_name'` is correctly configured in `settings.py` and that `your_app_name` is also in `INSTALLED_APPS` before executing `python manage.py tailwind install`.","message":"The `TAILWIND_APP_NAME` setting must be defined in your `settings.py` BEFORE running `python manage.py tailwind install`. Failure to do so can lead to an incomplete setup or errors during installation.","severity":"gotcha","affected_versions":"All versions"},{"fix":"Use `python manage.py tailwind start` during development. For production deployment, ensure you run `python manage.py tailwind build` to compile your CSS, followed by `python manage.py collectstatic` to gather the output.","message":"There's a distinction between `python manage.py tailwind start` (for development with hot-reloading) and `python manage.py tailwind build` (for production static file generation). Using `start` in production will not generate optimized static assets.","severity":"gotcha","affected_versions":"All versions"}],"env_vars":null,"last_verified":"2026-04-16T00:00:00.000Z","next_check":"2026-07-15T00:00:00.000Z","problems":[{"fix":"Install Node.js and npm from their official website (nodejs.org) for your operating system. Verify installation with `node -v` and `npm -v`.","cause":"Node.js or npm is not installed, or not in your system's PATH.","error":"command 'npm' not found"},{"fix":"Ensure `TAILWIND_APP_NAME` is set in `settings.py` and then run `python manage.py tailwind install` to install `tailwindcss` and other npm dependencies into your project.","cause":"Tailwind CSS itself has not been correctly installed within the project's Tailwind app directory by npm.","error":"Error: Cannot find module 'tailwindcss'"},{"fix":"Add `'django_tailwind'` to your `INSTALLED_APPS` list in `settings.py`.","cause":"`django_tailwind` is not included in your `INSTALLED_APPS` in `settings.py`.","error":"Unknown command: 'tailwind'"},{"fix":"Ensure you run `python manage.py tailwind build` to compile the CSS for production, and then `python manage.py collectstatic` to gather all static files, including the generated Tailwind CSS.","cause":"The Tailwind CSS file was not generated or collected into your static files during production deployment.","error":"Staticfiles manifest entry for 'css/tailwind.css' not found"}]}