如何在 Django 中使用 TailwindCSS？

Question

如何在 Django 项目（不仅是 CDN）中使用 TailwindCSS 的所有功能，包括具有自动重新加载的干净工作流程，以及用于生产就绪的 purgeCSS 步骤？

在谷歌搜索时，我发现了一个名为 django-tailwind 的 python 包，但它在这个过程中并没有真正帮助我。

Answer 1

TL; 博士

1. 在你的 Django 项目中安装 TailwindCSS，就像任何带有 npm 的 JS 项目一样
2. 在 Django 中使用实时重新加载服务器包
3. 在部署之前添加 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 文件中，添加：

cd your-django-folder; mkdir jstoolchain; cd jstoolchain
npm install tailwindcss postcss-cli autoprefixer
npx tailwind init
touch postcss.config.js

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 加载静态文件：

module.exports = {
    plugins: [
        require('tailwindcss'),
        require('autoprefixer')
    ]
}

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

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

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

3 - purgeCSS 过程

当您准备好部署时，为确保 CSS 输出文件不会因无用的类而变得臃肿，请转到 jstoolchain/tailwind.config.js 文件，并添加：

mkdir css; touch css/tailwind.css

现在，运行构建脚本应该会生成一个更小的 CSS 输出、生产就绪文件。

编辑：Tailwind 2.1 带有一个可选的 Just-In-Time 编译器。该purge部分仍然是必需的，但您不需要在部署之前运行清除脚本，还有许多其他优点。 看这里了解更多信息

改进工作流程的想法

• 当输入的顺风文件（css，js）被编辑时，构建脚本可以自动运行
• （仅当您不使用即时编译器时） PurgeCSS 可以在需要时自动运行，而不是手动添加或删除它。

Answer 2

Django-Tailwind CSS 是一个非常好的软件包，对我来说效果很好。正确地遵循文档，你会没事的。

在开始之前，请确保您已npm在系统上正确安装

快速开始

1. 从 pip 安装 python 包 django-tailwind

pip install django-tailwind

或者，您可以下载或克隆此 repo 并运行 pip install -e ..

2. 添加tailwind到settings.py 中的INSTALLED_APPS

3. 创建一个与顺风兼容的 Django 应用程序，我喜欢称之为theme：

python manage.py tailwind init theme

4. 将您新创建的theme应用程序添加到settings.py 中的INSTALLED_APPS

5. 在settings.py 中，通过添加以下字符串来注册 Tailwind 应用程序：

TAILWIND_APP_NAME = 'theme'

6. 运行命令以安装 tailwind css 的所有必要依赖项：

python manage.py tailwind install

7. 现在，在开发模式下开始顺风：

python manage.py tailwind start

8. Django Tailwind 带有一个简单的 base.html 模板，可以在yourtailwindappname/templates/base.html下找到。如果您有自己的布局，您可以随时扩展或删除它。

9. 如果您没有使用Django Tailwind 提供的base.html模板，请将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 过程，请参阅文档中的简单示例

对于NPM 路径配置错误（尤其是在 Windows 上），请参阅文档

Answer 3

有点晚了，但我最近写了一篇关于这个的博客文章，重点是用 Webpack 和 TailwindCSS 替换 Django Cookiecutter 中的 Gulp 和 Bootstrap。这是链接：https : //www.boringbackend.dev/using-tailwindcss-cookiecutter-django/