在 DjangoStarter 中集成 TailwindCSS
前言
好久没有更新技术文章了
这个月开箱和随笔倒是写了不少，又忙又懒的
基础的文章不太想写，稍微深入一点的又需要花很多时间来写
虽然但是，最终还是想水一篇
最近做了一个基于 wagtail 的项目，有不少东西可以记录。本文先记录一下把 tailwindcss 支持添加到 DjangoStarter 框架里
使用原生 Django 的话也能参考，都是大同小异的
之前看到有个叫 django-tailwind 的 python包，不过可能配套的 tailwind 版本不方便更新，再加上 DjangoStarter 很早就使用 NPM 和 gulp 来管理前端静态资源了，所以还是手动来添加 tailwind 比较好。
安装 tailwindcss
安装
在 DjangoStarter 的项目根目录执行命令
pnpm install -D tailwindcss
初始化
在根目录执行命令
npx tailwindcss init
这个命令会在根目录添加 tailwind.config.js 文件，修改一下
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./src/**/templates/**/*.html',
],
theme: {
extend: {},
},
plugins: [],
}
创建css文件
创建 src/static/css/tailwind.src.css 文件
内容
@tailwind base;
@tailwind components;
@tailwind utilities;
启动 tailwind
在根目录执行命令
npx tailwindcss -i .\src\static\css\tailwind.src.css -o .\src\static\css\tailwind.css --watch
这样就搞定了
在开发过程中，tailwindcss会根据项目里用到的class动态生成css文件
tailwind组件库
tailwind生态还是很丰富的，组件库有很多选择，就算不要组件库也行，网上搜一下有很多 samples ，里面不乏一些让人眼前一亮的设计，现在有了 GPT 还能让 GPT 来写界面。
我目前在项目里用的是 Flowbite 和 Daisy
实际使用下来，还是 Flowbite 比较舒服，组件样式定义比较自由，不过就要写好多 class
而 Daisy 就屏蔽了很多组件定义的细节，相对来说不太好修改样式
举个例子
同样是按钮
flowbite 是这样定义的
<button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Default</button>
daisy 是这样，有点 bootstrap 的感觉
<button class="btn btn-primary">Primary</button>
虽然 daisy 的代码很简洁，不过要自己调整有点麻烦
所以我还是倾向于使用 flowbite 这种风格，然后需要重复使用就自己封装成组件
使用 django-compressor 压缩静态资源
django-compressor 能够压缩和合并静态文件，提高网站的加载速度和性能。
之前我们是使用 gulp 这个 node 的工具来处理静态资源，也包括压缩静态资源这个功能，现在把压缩这一步交给 django-compressor ，更方便。
安装
pdm add django-compressor>=4.5
注册服务与配置
修改 src/config/settings/components/common.py
添加到 INSTALLED_APPS 里面
INSTALLED_APPS = [
# ...
'compressor',
# ...
]
然后再配置一下 STATICFILES_FINDERS
使用脚手架创建的 settings.py 里是没有这个配置的，前两个 finder 是 Django 默认有的
STATICFILES_FINDERS = [
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
'compressor.finders.CompressorFinder',
]
添加 src/config/settings/components/compressor.py 文件，把 compressor 的配置单独出来。
这个库有很多配置，具体可以看官方文档，这里我就只是把压缩的开关打开
COMPRESS_ENABLED = True
使用
OK，使用很简单。在引入 css/js 的地方使用 compressor template tag 就好
先引入 template tag
{% load compress %}
压缩CSS
{% compress css %}
<link rel="stylesheet" href="{% static 'css/tailwind.css' %}">
<link rel="stylesheet" href="{% static 'lib/font-awesome/css/all.min.css' %}">
{% block extra_css %}
{# Override this in templates to add extra stylesheets #}
{% endblock %}
{% endcompress %}
压缩JS
{% compress js %}
<script src="{% static 'lib/vue/dist/vue.min.js' %}"></script>
<script src="{% static 'lib/flowbite/dist/flowbite.min.js' %}"></script>
{% block extra_js %}
{# Override this in templates to add extra javascript #}
{% endblock %}
{% endcompress %}
