【发布时间】：2020-12-03 03:23:00
【问题描述】：
如何在 Django 项目（不仅仅是 CDN）中使用 TailwindCSS 的所有功能，包括 一个干净的工作流程，自动重新加载，purgeCSS 步骤可以投入生产？
在谷歌搜索时，我发现了一个名为 django-tailwind 的 python 包，但它并没有真正帮助我。
【问题讨论】：
标签： python css django tailwind-css
【发布时间】：2020-12-03 03:23:00
【问题描述】：
TL;DR
- 在您的 Django 项目中安装 TailwindCSS，就像使用 npm 的任何 JS 项目一样
- 在 Django 中使用实时重载服务器包
- 在部署前添加 purgeCSS 配置
更详细的解释
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 - 在本地处理自动重新加载
现在为简化开发而缺少的，是在更改和保存 HTML 文件时自动重新加载 django 开发服务器。 为此，我安装了django-livereload-server。
只需按照设置说明进行操作，即可按预期工作，无需任何特殊配置。
3 - purgeCSS 进程
当您准备好部署时，为确保 CSS 输出文件不会因无用的类而变得臃肿，请转到 jstoolchain/tailwind.config.js 文件，然后添加：
purge: {
enabled: true,
content: ['../your-django-folder/path-to-your-templates/**/*.html'],
},
现在，运行构建脚本应该会产生一个更小的 CSS 输出、生产就绪文件。
编辑：Tailwind 2.1 带有一个可选的即时编译器。 purge 部分仍然是必需的，但您不需要在部署之前运行清除脚本，还有许多其他优点。
Take a look here for more informations
改进工作流程的想法
- 编辑输入顺风文件（css、js）时，构建脚本可以自动运行
- （仅当您不使用即时编译器时） PurgeCSS 可以在需要时自动运行，而不是手动添加或删除它。
【讨论】：
-
您可以安装 npm-watch 并将其配置为在输入 css 或配置更改时自动构建输出。
-
您的说明在安装前的第 1 步中缺少“npm init -y”来创建 packages.json 文件：npm install tailwindcss postcss-cli autoprefixer
-
任何人在使用
npm run-script build时在OSX中获得(...)/node_modules/.bin/postcss: Permission denied？ （这在 Windows 中对我来说很好用）。 -
对我来说，这个过程产生了一个
package.json，而不是packages.json（即没有's'）。 -
创建tailwind-output.css的缩小版：1.将
"build:production": "cross-env NODE_ENV=production postcss css/tailwind.css -o css/tailwind-output.min.css"添加到脚本内的package.json； 2. postcss.config.js 必须包含module.exports = ({ env }) => ({ plugins: { tailwindcss: {}, autoprefixer: {}, cssnano: env === "production" ? { preset: "default" } : false } });； 3. 安装npm install --save-dev cssnano和npm install cross-env。然后npm run-script build:production
Django-Tailwind CSS 是一个非常好的包，对我来说效果很好。 正确关注the docs，你会没事的。
开始之前，请确保您的系统上已正确安装 npm
快速入门
- 从 pip 安装 python 包 django-tailwind
pip install django-tailwind
或者，您可以下载或克隆此 repo 并运行 pip install -e ..
-
在settings.py
中将tailwind添加到INSTALLED_APPS -
创建一个与tailwind兼容的Django-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
- 现在，在开发模式下启动顺风：
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
【讨论】：
-
有了这个包的最新版本，它现在更加简单，并且默认支持最新版本的tailwind CSS。随着新版本的发布，顺风 CSS 版本也更容易更新。
-
我正在使用 Django-Tailwind 包。有用。但是，我不清楚如何在这个包中使用顺风指令（'@apply）。我尝试在 src/styles.css 文件中使用 @apply 编写一些 CSS 类，但它没有在 static/css/styles.css 中处理成正确的 CSS 代码。在这方面有什么帮助吗？
有点晚了，但我最近写了一篇关于这个的博客文章，重点是用 Webpack 和 TailwindCSS 替换 Django Cookiecutter 中的 Gulp 和 Bootstrap。这是链接：https://www.boringbackend.dev/using-tailwindcss-cookiecutter-django/
【讨论】：
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 文件。
【讨论】：
-
这种模式（没有 postcss）在 OSX 上对我有用
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 文件应该已准备好在您的静态目录中使用。
【讨论】：