问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何在 Django 中使用 TailwindCSS？

社区维基
1
新手上路，请多包涵

如何在 Django 项目（不仅是 CDN）中使用 TailwindCSS 的所有功能，包括具有自动重新加载和 CSS 缩小步骤的干净工作流程以做好生产准备？

原文由 David Dahan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译pythoncssdjangotailwind-css
阅读 1.9k
2 个回答
得票最新
社区维基
1
✓ 已被采纳

2022 年 7 月更新：不再需要 PostCSS - 有一个独立的 CLI - django-browser-reload 是最好的扩展 - Django-tailwind 插件也是一个可接受的解决方案。

（至少）有 3 种不同的方法可以用 Django 正确安装 Tailwind。

第一种方法：NPM

如果您在项目中需要节点，这是首选方法（例如：添加像 Daisy UI 这样的插件，或者有一个 SPA）

安装 tailwindCSS 和构建/缩小进程

  • 在您的 Django 项目中创建一个新目录，您将在其中安装 tailwindCSS，就像在任何 vanilla JS 项目设置中一样：
 cd your-django-folder; mkdir jstoolchain; cd jstoolchain
npm init -y
npm install -D tailwindcss
npx tailwindcss init
  • 通过指定解析内容的正确位置，在刚刚创建的 tailwind.config.js 中配置模板路径。这可能类似于以下内容或略有不同，具体取决于您的模板所在的位置：
 ...
content: ["../templates/**/*.{html,js}"],
...
  • 在 your-django-folder 中，创建一个 input.css 文件并至少在其中添加以下内容：
 @tailwind base;
@tailwind components;
@tailwind utilities;
  • 在您的 package.json 文件中，您可以准备 npm 脚本以简化构建/缩小任务的执行（根据您的 Django static 文件夹位置调整路径）：
 "scripts": {
      // use in local environment
      "tailwind-watch": "tailwindcss -i ../input.css -o ../static/css/output.css --watch",
      // use in remote environment
      "tailwind-build": "tailwindcss -i ../input.css -o ../static/css/output.css --minify"
    }

  • 在您的 jstoolchains 文件夹中，在编码时继续运行 npm run tailwind-watch 。这将确保您的 output.css 文件在您向代码中添加新的顺风类后立即重新生成。将此文件添加到 .gitignore 。

  • 如果 tailwind-watch 运行没有错误，则 output.css 文件现在应该用 CSS 填充。现在您可以实际使用 tailwindCSS 类，方法是将输出的 css 文件与 Django 调用加载静态文件一起包含到 Django 模板文件中：

 {% load static %}

<head>
  <link rel="stylesheet" href="{% static "css/output.css" %}">
</head>
  • 不要忘记在部署过程中包含 npm run tailwind-build 脚本。这将构建输出并删除未使用的类以确保较小的文件大小。

在本地处理自动重新加载

现在为了简化开发而缺少的是在更改和保存 HTML 文件时自动重新加载 django 开发服务器。处理这个问题的最佳扩展是 Django-browser-reload 。只需按照设置说明进行操作，即可按预期工作

第二种方法： 独立 CLI

如果您的项目根本不需要节点，这是首选方法（例如：您的前端没有 SPA，您不需要像 daisyUI 之类的插件等）。

您可以按照 官方说明 手动安装它，或者使用这样的脚本外壳自动安装它：

 #!/bin/sh
set -e
TAILWIND_ARCHITECTURE=arm64 # chose the right architecture for you
TAILWIND_VERSION=v3.1.4 # chose the right version

SOURCE_NAME=tailwindcss-linux-${TAILWIND_ARCHITECTURE}
OUTPUT_NAME=tailwindcss
DOWNLOAD_URL=https://github.com/tailwindlabs/tailwindcss/releases/download/${TAILWIND_VERSION}/${SOURCE_NAME}

curl -sLO ${DOWNLOAD_URL} && chmod +x ${SOURCE_NAME}
mv ${SOURCE_NAME} ${OUTPUT_NAME} # rename it
mv ${OUTPUT_NAME} /usr/bin # move it to be used globally in a folder already in the PATH var

对于 Tailwind 配置本身，请参考第一种方法，其中有详细说明。

第三种方法： django-tailwind 插件

这个插件产生的结果与使用 npm 方法手动获得的结果大致相同。该插件有据可查，是最新的，人们似乎对它感到满意。作为个人喜好，我认为这样的抽象有点太神奇了，我更喜欢自己构建工具链来了解幕后发生的事情。但也可以随意尝试这种方法，如果适合你就选择它！

原文由 David Dahan 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

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

原文由 Hossein 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题