在 DjangoStarter 中集成 TailwindCSS - 程序设计实验室
内容提要
本文介绍了如何在DjangoStarter框架中添加Tailwind CSS支持，包括手动安装Tailwind CSS和配置相关文件。作者分享了使用Flowbite和Daisy组件库的经验，强调了Flowbite在样式定义上的灵活性，并介绍了使用django-compressor来压缩和合并静态文件，以提高网站性能。
延伸解读
为何选择手动集成而非现成包
文章提到存在 django-tailwind 包，但作者担心其配套的 Tailwind 版本更新不便，加上 DjangoStarter 已使用 NPM 和 gulp 管理前端资源，因此选择手动安装。这反映出在已有前端工具链的项目中，手动集成可能更灵活，能自主控制 Tailwind 版本和构建流程，避免第三方包带来的版本滞后问题。
Flowbite 与 Daisy 的取舍
作者对比了 Flowbite 和 Daisy 两个组件库。Flowbite 的按钮需要写大量 class，但样式定义自由，易于自定义；Daisy 的按钮只需 btn btn-primary，类似 Bootstrap，代码简洁但屏蔽了细节，修改样式较麻烦。作者倾向 Flowbite，并建议重复使用时自行封装成组件，以平衡灵活性与代码复用。
用 django-compressor 替代 gulp 压缩
文章介绍使用 django-compressor 来压缩和合并静态文件，以提升网站加载速度。此前用 gulp 处理静态资源压缩，现在将这一步交给 django-compressor，配置更简单。需要在 INSTALLED_APPS 添加 compressor，并配置 STATICFILES_FINDERS 加入 CompressorFinder，再通过 COMPRESS_ENABLED = True 开启压缩。
模板中如何使用 compressor
在模板中先 {% load compress %}，然后用 {% compress css %} 和 {% compress js %} 标签包裹需要压缩合并的静态文件链接或脚本。文章示例中包裹了 tailwind.css、font-awesome 以及 vue、flowbite 的 JS 文件，并保留了 extra_css 和 extra_js 块供子模板扩展。这样能自动合并压缩，减少请求数。
Q&A
如何在DjangoStarter中手动安装Tailwind CSS？
在项目根目录执行命令pnpm install -D tailwindcss和npx tailwindcss init。
Flowbite和Daisy组件库有什么区别？
Flowbite在样式定义上更灵活，但需要写更多的类；而Daisy的样式相对简单，但不易修改。
如何使用django-compressor提高网站性能？
通过在settings.py中配置INSTALLED_APPS和STATICFILES_FINDERS来启用django-compressor，并使用compressor template tag来压缩静态文件。
如何配置Tailwind CSS的主题和内容？
修改tailwind.config.js文件，设置content和theme属性。
在Django中如何引入和使用Tailwind CSS？
创建src/static/css/tailwind.src.css文件并添加基本样式，然后使用npx命令生成tailwind.css文件。
使用Flowbite时需要注意什么？
使用Flowbite时需要写较多的类来定义样式，但可以获得更大的灵活性。
