Django 项目集成 daisyUI：无需 Node.js 的 Tailwind CSS 组件库安装指南-CSDN博客

Django 项目集成 daisyUI：无需 Node.js 的 Tailwind CSS 组件库安装指南

【免费下载链接】daisyui 🌼 🌼 🌼 🌼 🌼 The most popular, free and open-source Tailwind CSS component library 项目地址: https://gitcode.com/GitHub_Trending/da/daisyui

daisyUI 是当前流行的开源 Tailwind CSS 组件库，其 5.x 版本支持通过 Tailwind CSS 独立可执行文件（Standalone CLI）与单文件 bundle 的方式接入项目，全程不依赖 Node.js 与 npm。本文以 daisyUI 官方文档中 Django 安装指南/docs/install/django/+page.md) 为主体，结合仓库内安装脚本与 bundle 源码，完整讲解在 Django 项目中安装 Tailwind CSS 和 daisyUI、生成样式文件、接入模板并运行开发服务器的全流程。读完本文，你将掌握两种安装路径（快速脚本与手动安装），并能理解 input.css 中 @source、@plugin 指令的作用以及自定义主题的扩展方式。

一、方案概览：为什么 Django 项目可以不用 Node.js

传统前端工具链（Vite、Webpack 等）依赖 Node.js 生态，但 daisyUI 为纯 CSS 组件库场景提供了更轻量的替代路径：

Tailwind CSS Standalone 可执行文件：官方发布的独立二进制，内置完整的 Tailwind 编译能力，无需安装 Node.js 与 npm；
daisyUI bundle 单文件：仓库将 daisyUI 主插件与主题插件分别打包为 daisyui.mjs 与 daisyui-theme.mjs 两个 ESM 单文件（构建脚本见 packages/daisyui/functions/bundle.js，产物位于 packages/bundle/），可直接通过 CSS 的 @plugin 指令加载。

于是 Django 后端团队只需持有 Python 环境，即可完成整套前端样式构建。

二、第一步：创建 Django 项目

首先按官方 Python 文档安装 Python，然后安装 Django：

python -m pip install Django

创建名为 myapp 的新项目并进入项目目录：

django-admin startproject myapp
cd myapp

三、第二步：创建 Django 首页

3.1 创建模板文件

在 myapp/templates/index.html 创建模板，通过 Django 静态文件标签引入稍后生成的 output.css，并在页面中使用 daisyUI 的 btn btn-primary 类名：

<!DOCTYPE html>
<html>
<head>
    <title>My Django App</title>
    {% load static %}
    <link href="{% static 'css/output.css' %}" rel="stylesheet" type="text/css" />
</head>
<body>
    <button class="btn btn-primary">Hello daisyUI</button>
</body>
</html>

3.2 创建视图

在 myapp/views.py 中编写渲染该模板的视图：

from django.shortcuts import render

def home(request):
    return render(request, 'index.html')

3.3 注册 URL

在 myapp/urls.py 中引入视图并注册根路由：

  from django.contrib import admin
  from django.urls import path
+ from . import views

  urlpatterns = [
      path("admin/", admin.site.urls),
+     path("", views.home, name="home"),
  ]

3.4 注册应用

在 myapp/settings.py 的 INSTALLED_APPS 中加入 myapp（django.contrib.staticfiles 已默认启用，用于服务静态文件）：

  INSTALLED_APPS = [
      "django.contrib.admin",
      "django.contrib.auth",
      "django.contrib.contenttypes",
      "django.contrib.sessions",
      "django.contrib.messages",
      "django.contrib.staticfiles",
+     "myapp",
  ]

四、第三步：添加 Tailwind CSS 与 daisyUI

官方提供了两种安装路径：快速安装（Fast install） 与 手动安装（Manual install），按需任选其一。

4.1 快速安装（一条命令完成）

快速安装脚本会依次完成以下工作：

下载当前操作系统对应的最新版 Tailwind CSS Standalone 可执行文件；
下载最新版 daisyUI bundle 文件；
创建包含 Tailwind CSS 与 daisyUI 的 input.css 文件；
首次生成 output.css 文件。

Linux / macOS（脚本源码见 packages/docs/static/fast）：

cd myapp/static/css && curl -sL daisyui.com/fast | bash

Windows（脚本源码见 packages/docs/static/fast.ps1）：

cd myapp/static/css && powershell -c "irm daisyui.com/fast.ps1 | iex"

从 fast 脚本源码可以看出它的实现细节：脚本通过 uname -s 与 uname -m 自动探测操作系统（Linux/Darwin）与架构（x64/arm64），并通过 ldd --version 判断 musl 环境以选择对应的二进制变体（如 tailwindcss-linux-x64-musl）；随后依次下载 tailwindcss、daisyui.mjs、daisyui-theme.mjs，写入 input.css，最后执行 ./tailwindcss -i input.css -o output.css 完成首次编译。Windows 版 fast.ps1 则固定使用 tailwindcss-windows-x64.exe。两版脚本均开启了严格错误模式（set -euo pipefail / $ErrorActionPreference = "Stop"），任一步骤失败都会输出安装失败提示并退出。

4.2 手动安装

获取 Tailwind CSS 可执行文件

参照 Tailwind CSS Standalone CLI 指南，按操作系统下载对应版本（以下为官方示例命令）：

# Run the corresponding command for your OS

# Linux
curl -sLo myapp/static/css/tailwindcss https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-arm64
curl -sLo myapp/static/css/tailwindcss https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-arm64-musl
curl -sLo myapp/static/css/tailwindcss https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-x64
curl -sLo myapp/static/css/tailwindcss https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-x64-musl

# MacOS
curl -sLo myapp/static/css/tailwindcss https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-arm64
curl -sLo myapp/static/css/tailwindcss https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-x64

# Windows
curl -sLo myapp/static/css/tailwindcss.exe https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-windows-x64.exe

Linux 与 macOS 需要赋予可执行权限：

chmod +x myapp/static/css/tailwindcss

获取 daisyUI bundle JS 文件

将最新版 daisyUI 打包为的两个单文件下载到 Tailwind 可执行文件同级目录：

curl -sLo myapp/static/css/daisyui.mjs https://github.com/saadeghi/daisyui/releases/latest/download/daisyui.mjs
curl -sLo myapp/static/css/daisyui-theme.mjs https://github.com/saadeghi/daisyui/releases/latest/download/daisyui-theme.mjs

daisyui.mjs 与 daisyui-theme.mjs 对应仓库中 packages/bundle/daisyui.mjs 与 packages/bundle/daisyui-theme.mjs 两个构建产物：前者是主插件（内含主题顺序表、插件选项处理、CSS 层嵌套逻辑、颜色变量映射及全部内置主题的 token），后者是独立的自定义主题插件。

配置 input.css

创建 myapp/static/css/input.css，引入 Tailwind CSS 与 daisyUI，并在 source 函数中指定你的 HTML 及其他标记文件位置：

@import "tailwindcss";

@source not "./tailwindcss";
@source not "./daisyui{,*}.mjs";

@plugin "./daisyui.mjs";

/* Optional for custom themes – Docs: https://daisyui.com/docs/themes/#how-to-add-a-new-custom-theme */
@plugin "./daisyui-theme.mjs"{
  /* custom theme here */
}

对关键指令说明如下：

@source not "./tailwindcss" 与 @source not "./daisyui{,*}.mjs"：将 Tailwind 可执行文件与 daisyUI 的 JS bundle 排除出内容扫描范围，避免把二进制与插件文件当作源文件处理（两版快速安装脚本生成的 input.css 也完全一致，Windows 版会将第一条排除规则写成 ./tailwindcss.exe）；
@plugin "./daisyui.mjs"：加载 daisyUI 主插件。从 packages/daisyui/index.js 可见，主插件通过 plugin.withOptions 注册，内部遍历 base、components、utilities 三类样式并调用 addBase / addComponents / addUtilities 注入，同时注册 is-drawer-open、is-drawer-close 两个变体；
末尾可选的 @plugin "./daisyui-theme.mjs"：用于自定义主题。对应实现见 packages/daisyui/functions/themePlugin.js，支持 name、default、prefersdark、color-scheme、root 等选项以及任意 CSS 变量 token，且当 name 与内置主题同名时会先合并内置主题再覆盖自定义 token。

五、第四步：运行 Tailwind 生成 output.css

使用 --watch 参数，当 input.css 或源文件变化时自动重新生成 output.css；CI/CD 场景下不加 --watch 一次性生成即可：

myapp/static/css/tailwindcss -i myapp/static/css/input.css -o myapp/static/css/output.css --watch
# For Windows
myapp\static\css\tailwindcss.exe -i myapp/static/css/input.css -o myapp/static/css/output.css --watch

六、第五步：运行 Django 服务

另开一个终端标签页启动 Django 开发服务器：

python manage.py runserver

此时访问首页即可看到 daisyUI 的 btn btn-primary 按钮样式，项目内可以自由使用 daisyUI 的全部组件类名了。

七、深入理解：bundle 插件机制与主题扩展

7.1 主插件（daisyui.mjs）做了什么

从 packages/daisyui/index.js 可以看到主插件的核心结构：它默认将内置主题以 light --default、dark --prefersdark 的方式注入（默认主题逻辑位于 packages/daisyui/functions/pluginOptionsHandler.js），同时通过 packages/daisyui/functions/variables.js 把 base-100、primary、radius-box 等设计令牌映射为 Tailwind 主题扩展项，使 bg-base-100、text-primary 这类工具类可以直接使用。所有组件与工具类样式在注入前还会经过 packages/daisyui/functions/nestCssLayers.js 的层嵌套处理，保证 @layer 顺序正确、级联可控。

7.2 自定义主题（daisyui-theme.mjs）

快速脚本与手动安装都会同时下载 daisyui-theme.mjs。在 input.css 中启用它并填入主题 token 即可定义专属主题，例如：

@plugin "./daisyui-theme.mjs"{
  name: "mybrand";
  default: true;
  prefersdark: true;
  "color-scheme": "light";
  --color-base-100: oklch(98% 0 0);
  --color-base-200: oklch(95% 0 0);
  --color-primary: oklch(55% 0.2 250);
  --color-primary-content: oklch(98% 0 0);
  --radius-box: 1rem;
}

从 themePlugin.js 的实现看，name 决定生成的选择器（[data-theme="name"] 以及 theme-controller 复选框选中态），default: true 会将主题应用到根元素 :where(:root)，prefersdark: true 会在 prefers-color-scheme: dark 媒体查询下生效，未填写的 token 会自动回退到同名内置主题（若存在）的值。

八、常见问题与注意事项

模板路径：Django 默认从每个已注册应用的 templates 目录查找模板，因此 myapp/templates/index.html 可直接被 render(request, 'index.html') 解析；
静态文件目录：myapp/static/css/ 会被 django.contrib.staticfiles 自动收集，{% static 'css/output.css' %} 才能正确解析；正式部署时还需执行 python manage.py collectstatic；
Watch 与生产：开发时保持 --watch 常驻以获得热更新；CI/CD 中应去掉 --watch 一次性构建，避免进程挂起；
操作系统差异：Linux 需根据 glibc/musl 选择对应的二进制后缀，macOS 与 Windows 各有独立文件；Windows 版脚本与命令使用 tailwindcss.exe 与反斜杠路径；
避免重复下载：快速安装脚本与手动安装的产物一致（tailwindcss、daisyui.mjs、daisyui-theme.mjs、input.css、output.css），两套流程不要混跑，以免互相覆盖。

至此，你的 Django 项目已具备完整的 daisyUI 组件能力，且整个前端构建链不依赖 Node.js，非常适合纯 Python 团队或对部署体积敏感的场景。

【免费下载链接】daisyui 🌼 🌼 🌼 🌼 🌼 The most popular, free and open-source Tailwind CSS component library 项目地址: https://gitcode.com/GitHub_Trending/da/daisyui

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考