如何将TailwindCSS与Django一起使用？

TL；博士

1. 在Django项目中安装TailwindCSS，就像任何带有npm的JS项目一样
2. 将实时重新加载服务器包与Django一起使用
3. 在部署之前添加purgeCSS配置

更详细的解释

1-TailwindCSS构建过程

在Django项目中创建一个新目录，在其中安装tailwindCSS，就像在任何vanilla JS项目设置中一样：

cd您的django文件夹；mkdir工具链；cd JS工具链
npm安装tailwindcss postcss cli autoprefixer
npx顺风初始
触摸postss.config.js

在此postsss.config.js文件中，添加：

module.exports={
插件：[
require（'tailwindcss'），
需要（'autoprefixer'）
]
}

mkdir css；触摸css/tailwind.css

在此tailwind.css文件中，至少添加以下内容：

@顺风基地；
@顺风组件；
@顺风公用事业；

现在，在jstoolchain/package.json文件中添加一个脚本以创建构建过程并指定输出文件，例如：

{
&“脚本”：{
&“构建”：“postsss css/tailwind.css-o../your django folder/your path to static/css/tailwind output.css”；
}
}

现在，快跑

npm运行脚本构建

这应该运行无误，tailwind-output.css现在应该填充数千行。现在，您可以实际使用tailwindCSS类，方法是将输出的css文件与Django加载静态文件的调用一起包含到Django模板文件中：

{%load static%}
&lt；头&gt；
&lt；链接rel=&quot；样式表“；href=&quot；{%static&quot；css/tailwind output.css&quot；%}&quot&燃气轮机；
&lt/头&gt；

2-本地处理自动重新加载

现在要简化开发，缺少的是在更改和保存HTML文件时自动重新加载django开发服务器。
为此，我安装了django livereload服务器

只需按照安装说明进行操作，这将按照预期开箱即用，无需任何特殊配置

3-purgeCSS流程

准备部署时，为了确保CSS输出文件中没有无用的类，请转到jstoolchain/tailwind.config.js文件，并添加：

清除：{
启用：对，
内容：['../django文件夹/模板路径/***.html']，
},

现在，运行构建脚本应该会生成一个更小的CSS输出，即可用于生产的文件

编辑：Tailwind 2.1附带了一个可选的即时编译器。purge部分仍然是必需的，但在部署之前不需要运行purge脚本，还有许多其他优点。
请查看此处以了解更多信息

---

改进工作流程的想法

• 编辑输入的顺风文件（css、js）时，可以自动运行构建脚本
• （只有在不使用即时编译器的情况下）PurgeCSS可以在需要时自动运行，而不是手动添加或删除