如何在Django中使用TailwindCSS？ 1-TailwindCSS构建过程 2-在本地处理自动重新加载 3-purgeCSS进程改善工作流程的想法快速入门

问题描述

如何在Django项目（不仅是CDN）中使用TailwindCSS的所有功能，包括带有自动重新加载的干净工作流程，并且purgeCSS步骤已准备好投入生产？

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

解决方法

TL; DR

在Django项目中安装TailwindCSS，就像使用npm的任何JS项目一样
在Django中使用实时重载服务器包
在部署之前添加purgeCSS配置

更详细的解释

1-TailwindCSS构建过程

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

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 / packages.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输出，可投入生产的文件。

改善工作流程的想法

编辑输入的顺风文件（css，js）时，构建脚本可以自动运行
PurgeCSS可以在需要时自动运行，而不是手动添加或删除它。
还有其他想法吗？

Django-Tailwind CSS是一个非常好的软件包，对我来说很好用。正确遵循the docs，一切都会好起来的。

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

快速入门

从pip安装python包django-tailwind

pip install django-tailwind

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

在 settings.py
中将tailwind添加到INSTALLED_APPS
创建一个顺风兼容的Django应用，我喜欢称之为theme：

python manage.py tailwind init theme

将您新创建的theme应用添加到 settings.py
中的INSTALLED_APPS中
在 settings.py 中，通过添加以下内容来注册tailwind应用字符串：

TAILWIND_APP_NAME = 'theme'

运行命令以安装顺风的所有必需依赖项 CSS：

python manage.py tailwind install

现在，开始以开发人员模式开始顺风：

python manage.py tailwind start

Django Tailwind带有一个简单的base.html模板，该模板可以在 yourtailwindappname / templates / base.html 下找到。你总是可以扩展它或删除它（如果您有自己的布局）。
如果您不使用Django提供的 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流程，请参见the docs

中的简单示例

有关 NPM路径配置错误（在Windows中尤其如此），请参见docs

有点晚了，但我最近写了一篇关于这个的博客文章，重点是用 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.css文件，其中包含Tailwind基础，组件和实用程序。

django python tailwind-css