在 DjangoStarter 中集成 TailwindCSS

前言

好久没有更新技术文章了

这个月开箱和随笔倒是写了不少,又忙又懒的

基础的文章不太想写,稍微深入一点的又需要花很多时间来写

虽然但是,最终还是想水一篇

最近做了一个基于 wagtail 的项目,有不少东西可以记录。本文先记录一下把 tailwindcss 支持添加到 DjangoStarter 框架里

使用原生 Django 的话也能参考,都是大同小异的

之前看到有个叫 django-tailwind 的 python包,不过可能配套的 tailwind 版本不方便更新,再加上 DjangoStarter 很早就使用 NPM 和 gulp 来管理前端静态资源了,所以还是手动来添加 tailwind 比较好。

安装 tailwindcss

安装

在 DjangoStarter 的项目根目录执行命令

bash 复制代码
pnpm install -D tailwindcss

初始化

在根目录执行命令

bash 复制代码
npx tailwindcss init

这个命令会在根目录添加 tailwind.config.js 文件,修改一下

js 复制代码
/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        './src/**/templates/**/*.html',
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

创建css文件

创建 src/static/css/tailwind.src.css 文件

内容

css 复制代码
@tailwind base;
@tailwind components;
@tailwind utilities;

启动 tailwind

在根目录执行命令

bash 复制代码
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 是这样定义的

html 复制代码
<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 的感觉

html 复制代码
<button class="btn btn-primary">Primary</button>

虽然 daisy 的代码很简洁,不过要自己调整有点麻烦

所以我还是倾向于使用 flowbite 这种风格,然后需要重复使用就自己封装成组件

使用 django-compressor 压缩静态资源

django-compressor 能够压缩和合并静态文件,提高网站的加载速度和性能。

之前我们是使用 gulp 这个 node 的工具来处理静态资源,也包括压缩静态资源这个功能,现在把压缩这一步交给 django-compressor ,更方便。

安装

bash 复制代码
pdm add django-compressor>=4.5

注册服务与配置

修改 src/config/settings/components/common.py

添加到 INSTALLED_APPS 里面

python 复制代码
INSTALLED_APPS = [
  # ...
  'compressor',
  # ...
]

然后再配置一下 STATICFILES_FINDERS

使用脚手架创建的 settings.py 里是没有这个配置的,前两个 finder 是 Django 默认有的

python 复制代码
STATICFILES_FINDERS = [
  'django.contrib.staticfiles.finders.FileSystemFinder',
  'django.contrib.staticfiles.finders.AppDirectoriesFinder',
  'compressor.finders.CompressorFinder',
]

添加 src/config/settings/components/compressor.py 文件,把 compressor 的配置单独出来。

这个库有很多配置,具体可以看官方文档,这里我就只是把压缩的开关打开

python 复制代码
COMPRESS_ENABLED = True

使用

OK,使用很简单。在引入 css/js 的地方使用 compressor template tag 就好

先引入 template tag

django 复制代码
{% load compress %}

压缩CSS

django 复制代码
{% 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

django 复制代码
{% 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 %}

参考资料

相关推荐
强化生物科研小助手16 小时前
CAS:47623-98-3,DiSBAC2(3)一种慢反应的膜电位敏感探针
django·html·pygame
橘猫云计算机设计18 小时前
基于springboot的考研成绩查询系统(源码+lw+部署文档+讲解),源码可白嫖!
java·spring boot·后端·python·考研·django·毕业设计
程序员一诺21 小时前
【Django开发】前后端分离django美多商城项目第15篇:商品搜索,1. Haystack介绍和安装配置【附代码文档】
后端·python·django·框架
小狗很可爱1 天前
视图函数的应用
django
麦麦大数据2 天前
neo4j+django+deepseek知识图谱学习系统对接前后端分离前端vue
vue.js·django·知识图谱·neo4j·deepseek·在线学习系统
兔子的洋葱圈2 天前
【django】1-2 django项目的请求处理流程(详细)
后端·python·django
爱摄影的程序猿2 天前
如何基于 Django-Vue-Admin 快速二次开发?高效后台管理系统实战指南(附完整代码)
vue.js·python·django
橘猫云计算机设计3 天前
基于django优秀少儿图书推荐网(源码+lw+部署文档+讲解),源码可白嫖!
java·spring boot·后端·python·小程序·django·毕业设计
靠近彗星3 天前
基于 Vue + Django + MySQL 实现个人博客/CMS系统
前端·vue.js·python·mysql·django
橘猫云计算机设计3 天前
基于ssm的食物营养成分数据分析平台设计与实现(源码+lw+部署文档+讲解),源码可白嫖!
后端·python·信息可视化·数据挖掘·数据分析·django·毕业设计