在 DjangoStarter 中集成 TailwindCSS

别了KV

于 2024-09-13 15:03:22 发布

阅读量41

点赞数

前言#

好久没有更新技术文章了

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

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

~~虽然但是，最终还是想水一篇~~

最近做了一个基于 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 %}