如何在Django中使用TailwindCSS？

Question

如何在Django中使用TailwindCSS？

pythoncssdjangotailwind-css

41

如何在Django项目中使用TailwindCSS的所有功能（不仅限于CDN），包括一个干净的工作流程，具有自动重新加载和CSS缩小步骤以达到生产就绪状态？

- David Dahan

7个回答

21

Django-Tailwind CSS 是一个非常好的包，它对我很有用。

请按照文档操作，你就没问题了。

在开始之前，请确保系统中已经正确安装了npm。

快速开始：

从pip中安装python包django-tailwind：

pip install django-tailwind

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

将tailwind添加到settings.py中的INSTALLED_APPS:

创建一个与tailwind兼容的Django app，我喜欢称之为theme：

python manage.py tailwind init theme

将您新创建的theme app添加到settings.py的INSTALLED_APPS中。
在settings.py中注册tailwind app，添加以下字符串：

TAILWIND_APP_NAME = 'theme'

运行一个命令来安装tailwind css的所有必要依赖项：

python manage.py tailwind install

现在，开始在dev模式下启动tailwind:

python manage.py tailwind start

Django Tailwind 自带一个简单的 base.html 模板，可以在 yourtailwindappname/templates/base.html 找到。您可以随时扩展它或删除它，如果您有自己的布局。
如果您没有使用 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 上），请参见文档。

- John Johnson

随着这个软件包的最新版本发布，现在使用起来更加容易，并且默认支持最新版本的tailwind CSS。随着新版本的发布，更新tailwind CSS版本也变得更加容易了。 - Sandeep Patil

2

我正在使用 Django-Tailwind 包。它可以正常工作。但是，我不确定如何在此包中使用 tailwind 指令（'@apply）。我尝试在 src/styles.css 文件中编写一些带有 @apply 的 CSS 类，但它未在 static/css/styles.css 中被处理成正确的 CSS 代码。关于这方面的任何帮助？ - Kimarokko

8

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

- Hossein

3

1. 前往你期望安装的文件夹。在我的情况下：

 mkdir static/css/tailwind

 cd static/css/tailwind

2. 创建package.json文件：

npm init -y

3. 通过npm安装Tailwind:

npm i tailwindcss

4. 创建一个CSS文件，并从官方Tailwind文档中添加代码：

@tailwind base;
@tailwind components;
@tailwind utilities;

5. 打开 package.json 文件，并对 "scripts" 进行如下更改：

  "scripts": {
    "build:css": "tailwind build tw.css -o ../tailwind.css"
  },

6. 运行编写的脚本

npm run build:css

tw.css 是我们在第四步中创建的文件的位置。而 ../tailwind.css 则是我们希望 Tailwind css 输出的文件位置。因此，在运行此命令后，我们将获得一个包含 Tailwind 基础样式、组件和实用程序的 tailwind.css 文件。

- Ulvi

2

这个模式（不使用postcss）在我的OSX上运行良好。 - Adam Starrh

2

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 文件。

- kelvin

0

发现了这个在 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

在 settings.py 中将 'tailwind' 添加到 INSTALLED_APPS：

INSTALLED_APPS = [ 'tailwind', ]

创建一个与 Tailwind CSS 兼容的 Django 应用程序，我喜欢称其为主题（theme）：

python manage.py tailwind init

在 settings.py 中将新创建的“主题”应用程序添加到 INSTALLED_APPS：

INSTALLED_APPS = [ 'tailwind', 'theme' ]

将生成的“theme”应用程序注册，通过在settings.py文件中添加以下行：

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模板，位于您的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响应前插入所需的脚本标记。

在root url.py中包含django_browser_reload URL：

from django.urls import include, path

urlpatterns = [path("__reload__/", include("django_browser_reload.urls")),]

最后，在HTML中应该能够使用Tailwind CSS类。通过在终端中运行以下命令启动开发服务器：

python manage.py tailwind start

- ilyasbbu

目前你的回答不够清晰，请编辑并添加更多细节，以帮助其他人理解它如何回答问题。你可以在帮助中心找到有关如何编写好答案的更多信息。 - Community

0

我知道你提到要排除CDN，但我点击了这个页面来寻找在我的Django项目中使用tailwind的方法，而不知道有一个CDN（我也花了几个小时来调试）。所以对于那些通过搜索找到这个问题的人，请查看https://tailwindcss.com/docs/installation/play-cdn。

- hmfzer

虽然这个链接可能回答了问题，但最好在此处包含答案的基本部分并提供参考链接。如果链接页面更改，仅有链接的答案可能会失效。-【来自审查】 - L8R

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- David Dahan · Accepted Answer

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

第一种方法：NPM

如果您的项目需要使用node（例如：添加插件，如Daisy UI，或者有一个SPA），这是首选方法。

安装tailwindCSS和构建/压缩过程

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

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}"],
...

在你的 Django 文件夹中，创建一个 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`。这将确保在你向代码中添加新的tailwind类时，你的`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

如果您的项目根本不需要node（例如：前端没有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方法手动获取的结果几乎相同。该插件有很好的文档，保持更新，并且人们似乎对它很满意。作为个人偏好，我认为这样的抽象会带来一些魔力，我更喜欢自己构建工具链，以了解幕后发生的事情。但是如果适合您，请随意尝试这种方法并选择它！

如何在Django中使用TailwindCSS？

第一种方法：NPM

安装tailwindCSS和构建/压缩过程

处理本地自动重新加载

第二种方法：独立CLI

Tailwind + Django 入门

- 完全支持 tailwind 的 inplace html 样式。

- 同时提供一个 main.scss 文件，您可以在其中添加自定义样式。

或者

- 完全支持 tailwind 的 `inplace` html 样式。

- 同时提供一个 `main.scss` 文件，您可以在其中添加自定义样式。