如何在Django中使用TailwindCSS? [英] How to use TailwindCSS with Django?
问题描述
如何在Django项目(不仅是CDN)中使用TailwindCSS的所有功能，包括具有自动重新加载功能的干净工作流程，并且purgeCSS步骤已准备好投入生产?
How to use all features of TailwindCSS in a Django project (not only the CDN), including a clean workflow with auto-reloading, and purgeCSS step to be production-ready?
在谷歌搜索时，我发现了一个名为django-tailwind的python程序包，但在此过程中并没有真正帮助我.
When googling, I found a python package named django-tailwind but it did not really helped me in the process.
推荐答案
TL; DR
- 在Django项目中安装TailwindCSS，就像使用npm的任何JS项目一样
- 在Django中使用实时重载服务器包
- 在部署之前添加purgeCSS配置
更详细的解释
1-TailwindCSS构建过程
在Django项目中创建一个新目录，就像在任何普通JS项目设置中一样，在其中安装tailwindCSS:
More detailed explanation
1 - The TailwindCSS build process
Create a new directory within your Django project, in which you'll install tailwindCSS like in any vanilla JS project setup:
cd your-django-folder; mkdir jstoolchain; cd jstoolchain
npm install tailwindcss postcss-cli autoprefixer
npx tailwind init
touch postcss.config.js
在此postcss.config.js文件中，添加:
In this postcss.config.js file, add:
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer')
]
}
mkdir css; touch css/tailwind.css
在该tailwind.css文件中，至少添加以下内容:
In this tailwind.css file, add at least this:
@tailwind base;
@tailwind components;
@tailwind utilities;
现在，在jstoolchain/packages.json文件中添加一个脚本以创建构建过程并指定输出文件，例如:
Now, add a script in your jstoolchain/packages.json file to create the build process and specify the output file, such as:
{
"scripts": {
"build": "postcss css/tailwind.css -o ../your-django-folder/your-path-to-static/css/tailwind-output.css"
}
}
现在，运行；
npm运行脚本构建
这应该没有错误地运行，并且tailwind-output.css现在应该填充成千上万行.现在，您实际上可以使用tailwindCSS类，方法是将输出的css文件包括在Django模板文件中，以及Django的调用以加载静态文件:
This should run without error, and tailwind-output.css should be now filled with thousands of lines. Now you can actually use tailwindCSS classes, by including the outputted css file into a Django template file along with Django's call to load the static files:
{% load static %}
<head>
<link rel="stylesheet" href="{% static "css/tailwind-output.css" %}">
</head>
2-在本地处理自动重新加载
为了简化开发，现在缺少的是在更改和保存HTML文件时自动重新加载django开发服务器.为此，我安装了 django-livereload-server .
只需按照设置说明进行操作，即可立即使用，无需任何特殊配置.
Just follow setup instructions, this will work as expected out of the box, without any special configuration.
准备部署时，要确保CSS输出文件不会因无用的类而classes肿，请转到jstoolchain/tailwind.config.js文件，然后添加:
When you're ready to deploy, to ensure the CSS output file is not bloated with useless classes, go to jstoolchain/tailwind.config.js file, and add:
purge: {
enabled: true,
content: ['../your-django-folder/path-to-your-templates/**/*.html'],
},
现在，正在运行的构建脚本应该生成的CSS输出要小得多，并且可以投入生产.
Now, running build script should produce a much smaller CSS output, production-ready file.
编辑:Tailwind 2.1带有可选的即时编译器. purge 部分仍将是必需的，但除其他优点外，您无需在部署之前运行清除脚本.在此处查看更多信息
EDIT: Tailwind 2.1 comes with an optional Just-In-Time compiler. The purge section will still be required, but you won't need to run a purge script before deploying, among many other advantages.
Take a look here for more informations
- 编辑输入的顺风文件(css，js)时，构建脚本可以自动运行
- (仅当您不使用即时编译器时) PurgeCSS可以在需要时自动运行，而不是手动添加或删除.
- The build script could be run automatically when the input tailwind files (css, js) are edited
- (Only if you don't use just-in-time compiler) PurgeCSS could be run automatically when required, rather than adding it or removing it manually.
这篇关于如何在Django中使用TailwindCSS?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
