如何在 Django 中使用 TailwindCSS？
How to use TailwindCSS with Django?
如何在Django项目中使用TailwindCSS的所有功能（不仅仅是CDN），包括
具有自动重新加载和 purgeCSS 步骤的干净工作流程以准备好生产？
在谷歌搜索时，我发现了一个名为 django-tailwind 的 python 包，但它并没有真正帮助我。
TL;DR
- 在您的 Django 项目中安装 TailwindCSS，就像使用 npm 的任何 JS 项目一样
- 在 Django 中使用 live-reload 服务器包
- 部署前添加清除CSS配置
更详细的解释
1 - TailwindCSS 构建过程
在您的 Django 项目中创建一个新目录，您将在其中安装 tailwindCSS，就像在任何 vanilla JS 项目设置中一样：
cd your-django-folder; mkdir jstoolchain; cd jstoolchain
npm install tailwindcss postcss-cli autoprefixer
npx tailwind init
touch postcss.config.js
在此 postcss.config.js 文件中，添加：
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer')
]
}
mkdir css; touch css/tailwind.css
在此 tailwind.css 文件中，至少添加以下内容：
@tailwind base;
@tailwind components;
@tailwind utilities;
现在，在您的 jstoolchain/package.json 文件中添加一个脚本来创建构建过程并指定输出文件，例如：
{
"scripts": {
"build": "postcss css/tailwind.css -o ../your-django-folder/your-path-to-static/css/tailwind-output.css"
}
}
现在，运行；
npm run-script build
这应该 运行 没有错误，并且 tailwind-output.css 现在应该填充了数千行。现在您可以实际使用 tailwindCSS 类，方法是将输出的 css 文件连同 Django 加载静态文件的调用一起包含到 Django 模板文件中：
{% load static %}
<head>
<link rel="stylesheet" href="{% static "css/tailwind-output.css" %}">
</head>
2 - 在本地处理 auto-reload
为了简化开发，现在缺少的是 auto-reload 在 HTML 文件被更改和保存时的 django 开发服务器。
为此，我安装了 django-livereload-server.
只需按照安装说明进行操作，开箱即用，无需任何特殊配置。
3 - 清除CSS 过程
当您准备好部署时，为确保 CSS 输出文件不会因无用的 类 而膨胀，转到 jstoolchain/tailwind.config.js 文件，然后添加：
purge: {
enabled: true,
content: ['../your-django-folder/path-to-your-templates/**/*.html'],
},
现在，运行ning 构建脚本应该会产生更小的 CSS 输出，production-ready 文件。
编辑：Tailwind 2.1 带有可选的 Just-In-Time 编译器。 purge 部分仍然是必需的，但您不需要 运行 在部署之前清除脚本，还有许多其他优点。
Take a look here for more informations
改进工作流程的想法
- 构建脚本可以在编辑输入顺风文件（css、js）时自动运行
- （仅当您不使用 just-in-time 编译器时） PurgeCSS 可以在需要时自动 运行，而不是添加它或手动删除它。
1.转到您想要的文件夹进行安装。在我的例子中：
mkdir static/css/tailwind
cd static/css/tailwind
2。创建package.json:
npm init -y
3。通过 npm 安装 Tailwind：
npm i tailwindcss
4。创建一个 css 文件并添加来自 official Tailwind documentation 的代码：
@tailwind base;
@tailwind components;
@tailwind utilities;
5.打开 package.json 并对“脚本”进行此更改：
"scripts": {
"build:css": "tailwind build tw.css -o ../tailwind.css"
},
6. 运行写好的剧本
npm run build:css
tw.css 是我们在第 4 步中创建的文件的位置。而 ../tailwind.css 是我们希望 Tailwind css 输出的文件的位置。因此，在 运行 这个命令之后，我们将有一个包含 Tailwind 基础、组件和实用程序的 tailwind.css 文件。
Django-Tailwind CSS 是一个非常好的软件包，对我来说效果很好。
正确遵循the docs，你会没事的。
开始之前，请确保 npm 在您的系统上正确安装
快速入门
- 从 pip
安装 python 包 django-tailwind
pip install django-tailwind
或者，您可以下载或克隆此 repo 和 运行 pip install -e ..
在settings.py
中将tailwind添加到INSTALLED_APPS
创建一个tailwind-compatibleDjango-app，我喜欢叫它theme:
python manage.py tailwind init theme
将您新创建的 theme 应用程序添加到 settings.py
中的 INSTALLED_APPS
在settings.py中，添加以下内容注册tailwind app
字符串：
TAILWIND_APP_NAME = 'theme'
- 运行 一条命令，用于安装 tailwind 所有必要的依赖项
css:
python manage.py tailwind install
- 现在，在开发模式下启动 tailwind：
python manage.py tailwind start
Django Tailwind 带有一个简单的 base.html 模板，可以
在 yourtailwindappname/templates/base.html 下找到。你总是可以
如果您有自己的布局，请扩展或删除它。
如果你没有使用 Django 提供的 base.html 模板
Tailwind，将 styles.min.css 添加到您自己的 base.html 模板文件中：
您现在应该可以在 html.
中使用 Tailwind CSS 类
构建 CSS 的生产版本 运行:
python manage.py tailwind build
对于实时重新加载，这会处理它：
python manage.py tailwind start
对于构建过程，这会处理它：
python manage.py tailwind build
对于 PurgeCSS 过程，请参阅 the docs
中的简单示例
对于 NPM 路径配置使用错误（尤其是 windows），请参阅 docs
有点晚了，但我最近写了一篇关于此的博客 post，重点是用 Webpack 和 TailwindCSS 替换 Django Cookiecutter 中的 Gulp 和 Bootstrap。这是link：https://www.boringbackend.dev/using-tailwindcss-cookiecutter-django/
Tailwind + Django 启动器
- 完全支持 tailwind inplace html 样式。
- 还有一个 main.scss 文件来添加您的自定义样式。
克隆项目
https://github.com/MindMansion/DjangoTailwindStarter
或
从您的 Django 项目目录
mkdir theme
cd theme
npx degit https://github.com/MindMansion/DjangoTailwindStarter/theme
npm install
npm run build
npm run watch
一个 global.css 文件应该可以在您的静态目录中使用。
在 github => https://github.com/timonweb/django-tailwind 上找到了这个很棒的存储库
可以简单地用 python manage.py tailwind start
初始化
特点：
- 支持热重载
- 支持最新的 tailwind 版本
通过 pip 安装 django-tailwind 包：
python -m pip install django-tailwind
或者，您可以通过以下方式安装最新的开发版本：
python -m pip install git+https://github.com/timonweb/django-tailwind.git
将'tailwind'添加到settings.py中的INSTALLED_APPS:
INSTALLED_APPS = [ 'tailwind', ]
创建一个 Tailwind CSS 兼容的 Django 应用程序，我喜欢称它为主题：
python manage.py tailwind init
将您新创建的 'theme' 应用程序添加到 settings.py 中的 INSTALLED_APPS:
INSTALLED_APPS = [ 'tailwind', 'theme' ]
通过将以下行添加到 settings.py 文件来注册生成的 'theme' 应用程序：
TAILWIND_APP_NAME = 'theme'
确保 INTERNAL_IPS 列表存在于 settings.py 文件中并包含 127.0.0.1 IP 地址：
INTERNAL_IPS = [ "127.0.0.1", ]
安装 Tailwind CSS 依赖项，通过 运行 以下命令：
python manage.py tailwind install
Django Tailwind 带有一个简单的 base.html 模板，位于 your_tailwind_app_name/templates/base.html。如果您已有布局，则可以随时扩展或删除它。
如果您没有使用 Django Tailwind 附带的 base.html 模板，请将 {% tailwind_css %} 添加到 base.html 模板：
{% load tailwind_tags %}
<head>
{% tailwind_css %}
</head>
{% tailwind_css %} 标签包含 Tailwind 的样式表。
我们还要添加和配置 django_browser_reload，它负责自动页面和 css 在开发模式下刷新。将其添加到 settings.py 中的 INSTALLED_APPS:
INSTALLED_APPS = [ 'tailwind', 'theme', 'django_browser_reload' ]
留在settings.py，添加中间件：
MIDDLEWARE = [ "django_browser_reload.middleware.BrowserReloadMiddleware", ]
中间件应列在任何编码响应的后面，例如 Django 的 GZipMiddleware。当 DEBUG 为 True 之前，中间件会自动在 HTML 响应中插入所需的脚本标记。
在你的根中包含 django_browser_reload URL url.py:
from django.urls import include, path
urlpatterns = [ path("__reload__/", include("django_browser_reload.urls")), ]
最后，您应该可以在 HTML 中使用 Tailwind CSS 类。在终端中通过 运行 以下命令启动开发服务器：
python manage.py tailwind start
Vimesh 风格是 full-featured 微型 javascript 库替代 Tailwind CSS 2.0。只需在您的 html 页面中添加一行，剩下的就交给它了。 https://github.com/vimeshjs/vimesh-style
如何在Django项目中使用TailwindCSS的所有功能（不仅仅是CDN），包括 具有自动重新加载和 purgeCSS 步骤的干净工作流程以准备好生产？
在谷歌搜索时，我发现了一个名为 django-tailwind 的 python 包，但它并没有真正帮助我。
TL;DR
- 在您的 Django 项目中安装 TailwindCSS，就像使用 npm 的任何 JS 项目一样
- 在 Django 中使用 live-reload 服务器包
- 部署前添加清除CSS配置
更详细的解释
1 - TailwindCSS 构建过程
在您的 Django 项目中创建一个新目录，您将在其中安装 tailwindCSS，就像在任何 vanilla JS 项目设置中一样：
cd your-django-folder; mkdir jstoolchain; cd jstoolchain
npm install tailwindcss postcss-cli autoprefixer
npx tailwind init
touch postcss.config.js
在此 postcss.config.js 文件中，添加：
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer')
]
}
mkdir css; touch css/tailwind.css
在此 tailwind.css 文件中，至少添加以下内容：
@tailwind base;
@tailwind components;
@tailwind utilities;
现在，在您的 jstoolchain/package.json 文件中添加一个脚本来创建构建过程并指定输出文件，例如：
{
"scripts": {
"build": "postcss css/tailwind.css -o ../your-django-folder/your-path-to-static/css/tailwind-output.css"
}
}
现在，运行；
npm run-script build
这应该 运行 没有错误，并且 tailwind-output.css 现在应该填充了数千行。现在您可以实际使用 tailwindCSS 类，方法是将输出的 css 文件连同 Django 加载静态文件的调用一起包含到 Django 模板文件中：
{% load static %}
<head>
<link rel="stylesheet" href="{% static "css/tailwind-output.css" %}">
</head>
2 - 在本地处理 auto-reload
为了简化开发，现在缺少的是 auto-reload 在 HTML 文件被更改和保存时的 django 开发服务器。 为此，我安装了 django-livereload-server.
只需按照安装说明进行操作，开箱即用，无需任何特殊配置。
3 - 清除CSS 过程
当您准备好部署时，为确保 CSS 输出文件不会因无用的 类 而膨胀，转到 jstoolchain/tailwind.config.js 文件，然后添加：
purge: {
enabled: true,
content: ['../your-django-folder/path-to-your-templates/**/*.html'],
},
现在，运行ning 构建脚本应该会产生更小的 CSS 输出，production-ready 文件。
编辑：Tailwind 2.1 带有可选的 Just-In-Time 编译器。 purge 部分仍然是必需的，但您不需要 运行 在部署之前清除脚本，还有许多其他优点。
Take a look here for more informations
改进工作流程的想法
- 构建脚本可以在编辑输入顺风文件（css、js）时自动运行
- （仅当您不使用 just-in-time 编译器时） PurgeCSS 可以在需要时自动 运行，而不是添加它或手动删除它。
1.转到您想要的文件夹进行安装。在我的例子中：
mkdir static/css/tailwind
cd static/css/tailwind
2。创建package.json:
npm init -y
3。通过 npm 安装 Tailwind：
npm i tailwindcss
4。创建一个 css 文件并添加来自 official Tailwind documentation 的代码：
@tailwind base;
@tailwind components;
@tailwind utilities;
5.打开 package.json 并对“脚本”进行此更改：
"scripts": {
"build:css": "tailwind build tw.css -o ../tailwind.css"
},
6. 运行写好的剧本
npm run build:css
tw.css 是我们在第 4 步中创建的文件的位置。而 ../tailwind.css 是我们希望 Tailwind css 输出的文件的位置。因此，在 运行 这个命令之后，我们将有一个包含 Tailwind 基础、组件和实用程序的 tailwind.css 文件。
Django-Tailwind CSS 是一个非常好的软件包，对我来说效果很好。 正确遵循the docs，你会没事的。
开始之前，请确保 npm 在您的系统上正确安装
快速入门
- 从 pip 安装 python 包 django-tailwind
pip install django-tailwind
或者，您可以下载或克隆此 repo 和 运行 pip install -e ..
在settings.py
中将tailwind添加到INSTALLED_APPS创建一个tailwind-compatibleDjango-app，我喜欢叫它
theme:
python manage.py tailwind init theme
将您新创建的
中的 INSTALLED_APPStheme应用程序添加到 settings.py在settings.py中，添加以下内容注册tailwind app 字符串：
TAILWIND_APP_NAME = 'theme'
- 运行 一条命令，用于安装 tailwind 所有必要的依赖项 css:
python manage.py tailwind install
- 现在，在开发模式下启动 tailwind：
python manage.py tailwind start
Django Tailwind 带有一个简单的 base.html 模板，可以 在 yourtailwindappname/templates/base.html 下找到。你总是可以 如果您有自己的布局，请扩展或删除它。
如果你没有使用 Django 提供的 base.html 模板 Tailwind，将 styles.min.css 添加到您自己的 base.html 模板文件中：
您现在应该可以在 html.
中使用 Tailwind CSS 类构建 CSS 的生产版本 运行:
python manage.py tailwind build
对于实时重新加载，这会处理它：
python manage.py tailwind start
对于构建过程，这会处理它：
python manage.py tailwind build
对于 PurgeCSS 过程，请参阅 the docs
中的简单示例对于 NPM 路径配置使用错误（尤其是 windows），请参阅 docs
有点晚了，但我最近写了一篇关于此的博客 post，重点是用 Webpack 和 TailwindCSS 替换 Django Cookiecutter 中的 Gulp 和 Bootstrap。这是link：https://www.boringbackend.dev/using-tailwindcss-cookiecutter-django/
Tailwind + Django 启动器
- 完全支持 tailwind inplace html 样式。
- 还有一个 main.scss 文件来添加您的自定义样式。
克隆项目
https://github.com/MindMansion/DjangoTailwindStarter
或
从您的 Django 项目目录
mkdir theme
cd theme
npx degit https://github.com/MindMansion/DjangoTailwindStarter/theme
npm install
npm run build
npm run watch
一个 global.css 文件应该可以在您的静态目录中使用。
在 github => https://github.com/timonweb/django-tailwind 上找到了这个很棒的存储库
可以简单地用 python manage.py tailwind start
特点：
- 支持热重载
- 支持最新的 tailwind 版本
通过 pip 安装 django-tailwind 包：
python -m pip install django-tailwind
或者，您可以通过以下方式安装最新的开发版本：
python -m pip install git+https://github.com/timonweb/django-tailwind.git
将'tailwind'添加到settings.py中的INSTALLED_APPS:
INSTALLED_APPS = [ 'tailwind', ]
创建一个 Tailwind CSS 兼容的 Django 应用程序，我喜欢称它为主题：
python manage.py tailwind init
将您新创建的 'theme' 应用程序添加到 settings.py 中的 INSTALLED_APPS:
INSTALLED_APPS = [ 'tailwind', 'theme' ]
通过将以下行添加到 settings.py 文件来注册生成的 'theme' 应用程序：
TAILWIND_APP_NAME = 'theme'
确保 INTERNAL_IPS 列表存在于 settings.py 文件中并包含 127.0.0.1 IP 地址：
INTERNAL_IPS = [ "127.0.0.1", ]
安装 Tailwind CSS 依赖项，通过 运行 以下命令：
python manage.py tailwind install
Django Tailwind 带有一个简单的 base.html 模板，位于 your_tailwind_app_name/templates/base.html。如果您已有布局，则可以随时扩展或删除它。
如果您没有使用 Django Tailwind 附带的 base.html 模板，请将 {% tailwind_css %} 添加到 base.html 模板：
{% load tailwind_tags %}
<head>
{% tailwind_css %}
</head>
{% tailwind_css %} 标签包含 Tailwind 的样式表。
我们还要添加和配置 django_browser_reload，它负责自动页面和 css 在开发模式下刷新。将其添加到 settings.py 中的 INSTALLED_APPS:
INSTALLED_APPS = [ 'tailwind', 'theme', 'django_browser_reload' ]
留在settings.py，添加中间件：
MIDDLEWARE = [ "django_browser_reload.middleware.BrowserReloadMiddleware", ]
中间件应列在任何编码响应的后面，例如 Django 的 GZipMiddleware。当 DEBUG 为 True 之前，中间件会自动在 HTML 响应中插入所需的脚本标记。
在你的根中包含 django_browser_reload URL url.py:
from django.urls import include, path
urlpatterns = [ path("__reload__/", include("django_browser_reload.urls")), ]
最后，您应该可以在 HTML 中使用 Tailwind CSS 类。在终端中通过 运行 以下命令启动开发服务器：
python manage.py tailwind start
Vimesh 风格是 full-featured 微型 javascript 库替代 Tailwind CSS 2.0。只需在您的 html 页面中添加一行，剩下的就交给它了。 https://github.com/vimeshjs/vimesh-style