django-tailwind安装配置教程

Posted by 蓝染君

2025年7月5日

On 2025年7月5日

1、安装包

pip install 'django-tailwind[reload]'

pip install 'django-tailwind[reload]'

2、注册tailwind

# Add 'tailwind' to INSTALLED_APPS in settings.py:
INSTALLED_APPS = [
  # other Django apps
  'tailwind',
]

# Add 'tailwind' to INSTALLED_APPS in settings.py:
INSTALLED_APPS = [
  # other Django apps
  'tailwind',
]

3、初始化tailwind

python manage.py tailwind init

python manage.py tailwind init

默认tailwindcss 4 版本，如果切换3版本

python manage.py tailwind init --tailwind-version 3

python manage.py tailwind init --tailwind-version 3

4、添加初始化tailwindcss应用到系统

INSTALLED_APPS = [
  # other Django apps
  'tailwind',
  'theme'
]

INSTALLED_APPS = [
  # other Django apps
  'tailwind',
  'theme'
]

5、添加系统变量

# settings.py
TAILWIND_APP_NAME = 'theme'

# settings.py
TAILWIND_APP_NAME = 'theme'

6、安装tailwind css前端库

python manage.py tailwind install

python manage.py tailwind install

7、模板

路径：theme/templates/base.html

base.html示例内容

{% load static tailwind_tags %}
...
<head>
   ...
   {% tailwind_css %}
   ...
</head>

{% load static tailwind_tags %}
...
<head>
   ...
   {% tailwind_css %}
   ...
</head>

8、添加自动重载

css改动可自动刷新页面

INSTALLED_APPS = [
  # other Django apps
  'tailwind',
  'theme',
  'django_browser_reload'
]

INSTALLED_APPS = [
  # other Django apps
  'tailwind',
  'theme',
  'django_browser_reload'
]

10、添加中间件

MIDDLEWARE = [
  # ...
  "django_browser_reload.middleware.BrowserReloadMiddleware",
  # ...
]

MIDDLEWARE = [
  # ...
  "django_browser_reload.middleware.BrowserReloadMiddleware",
  # ...
]

11、添加路由

from django.urls import include, path
urlpatterns = [
    ...,
    path("__reload__/", include("django_browser_reload.urls")),
]

from django.urls import include, path
urlpatterns = [
    ...,
    path("__reload__/", include("django_browser_reload.urls")),
]

12、启动tailwind自动重载监控服务

python manage.py tailwind start

python manage.py tailwind start