在 DjangoStarter 中集成 TailwindCSS

djangostarter,tailwindcss · 浏览次数 : 55

小编点评

本文主要介绍了如何将 Tailwind CSS 添加到 Django Starter 框架中，并使用原生 Django 管理前端静态资源。文章首先介绍了 Tailwind CSS 的安装和配置，然后创建了一个 CSS 文件并启动 Tailwind。接着，文章讨论了 Tailwind 生态系统的丰富性，以及如何在项目中使用 Flowbite 和 Daisy 组件库。最后，文章介绍了如何使用 Django Compressor 压缩静态资源，以提高网站的加载速度和性能。 1. **Tailwind CSS 安装与配置**：本文首先介绍了如何在 Django Starter 项目中安装 Tailwind CSS，包括使用 npm 和 pnpm 进行安装，并通过命令行进行初始化配置。 2. **创建 CSS 文件与启动 Tailwind**：在项目根目录下创建了一个名为 `tailwind.src.css` 的 CSS 文件，并通过 Tailwind CLI 启动 Tailwind，生成动态生成的 CSS 文件。 3. **Tailwind 生态系统与组件库**：文章讨论了 Tailwind 生态系统的丰富性，提供了多种组件库供选择。作者在项目中使用了 Flowbite 和 Daisy 组件库，并对比了它们的优缺点。 4. **使用 Django Compressor 压缩静态资源**：文章介绍了如何使用 Django Compressor 压缩静态资源，包括在 settings.py 文件中配置静态文件查找器，以及在模板中使用压缩后的 CSS 和 JS 文件。总的来说，本文详细介绍了如何将 Tailwind CSS 集成到 Django Starter 框架中，并使用原生 Django 管理前端静态资源。通过使用 Tailwind CSS、Flowbite 和 Daisy 组件库，以及 Django Compressor 压缩静态资源，可以提高网站的加载速度和性能。

正文

前言

好久没有更新技术文章了

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

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

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

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