不使用 Node.js 运行 daisyUITailwind CSS Standalone CLI 安装与构建指南【免费下载链接】daisyui The most popular, free and open-source Tailwind CSS component library项目地址: https://gitcode.com/GitHub_Trending/da/daisyuidaisyUI 5 是 Tailwind CSS 的组件库常规安装方式依赖 Node.js 生态npm 包与 PostCSS 插件。当你的项目环境没有 Node.js或出于部署与构建链路的简化考虑时可以使用 Tailwind CSS 官方提供的 Standalone CLI独立可执行文件配合 daisyUI 的单文件 bundle 完成同样的安装与构建。本文基于 daisyUI 官方文档整理完整的快速安装与手动安装流程并结合仓库内真实脚本与 bundle 源码讲清每一步命令背后的实际行为读完即可在 Linux、macOS、Windows 上不依赖 Node.js 直接生成包含 daisyUI 组件的样式文件。为什么需要 Standalone CLITailwind CSS 官方提供了一种无需安装 Node.js 的独立可执行文件Standalone CLI它会自动检测系统中的架构并下载对应的二进制程序。daisyUI 为这种使用方式提供了配套的单文件 bundledaisyui.mjs与daisyui-theme.mjs可以直接通过plugin指令加载不需要 npm install也不需要任何包管理器。这非常适合没有 Node.js 运行环境的服务器与 CI/CD 流水线只需要静态生成 CSS 的简单前端项目使用 PHP、Go、Rust 等后端语言仅把 Tailwind daisyUI 作为样式生成工具的场景。daisyUI 的 Standalone 安装文档提供了两种方式快速安装一条命令自动完成全部下载与初始化和手动安装逐步下载可执行文件与 bundle 文件。下面分别展开。快速安装一条命令完成全部配置快速安装会依次完成四件事从 Tailwind CSS 官方发布页下载适用于你操作系统的 Standalone 可执行文件最新版从 daisyUI 发布页下载最新的 daisyUI bundle 文件自动创建包含 Tailwind CSS 与 daisyUI 的input.css文件首次运行构建生成output.css。Linux / macOScurl -sL daisyui.com/fast | bashWindowsPowerShellpowershell -c irm daisyui.com/fast.ps1 | iex两条命令的本质是通过curl或Invoke-RestMethodirm拉取仓库中维护的安装脚本然后直接交给 bash 或 PowerShelliex执行。这两个脚本就保存在本仓库的 packages/docs/static/fastbash 版本和 packages/docs/static/fast.ps1PowerShell 版本中你可以打开脚本查看每一步具体做了什么。快速安装脚本做了什么源码解读以 bash 版本的 fast 脚本 为例它的工作流程清晰可查系统识别通过uname -s判断操作系统linux/macos通过uname -m判断 CPU 架构x64/arm64并对 Linux 额外通过ldd --version检测是否基于 musl 以追加-musl后缀从而精确匹配 Tailwind 发布包命名规则tailwindcss-os-arch[-musl]下载 Tailwind 可执行文件拼接下载地址后使用curl -fsSLo tailwindcss下载并chmod x赋予执行权限下载 daisyUI bundle依次下载daisyui.mjs与daisyui-theme.mjs两个文件生成input.css脚本内置的INPUT_CSS_CONTENT变量写出标准入口文件内容见下文“编写 input.css”首次构建执行./tailwindcss -i input.css -o output.css生成样式。PowerShell 版本 fast.ps1 逻辑一致针对 Windows 下载tailwindcss-windows-x64.exe并在input.css中使用source not ./tailwindcss.exe排除可执行文件。两个脚本都通过错误陷阱trap/$ErrorActionPreference Stop保证失败时明确报错退出。手动安装逐步下载与配置如果你希望完全掌控每个环节或者需要把文件安装到特定目录可以按下面的步骤手动完成。第一步获取 Tailwind CSS 可执行文件参考 Tailwind CSS 官方 Standalone CLI 指南下载对应系统的可执行文件# 按你的操作系统运行对应命令 # Linuxarm64 与 x64含 musl 变体 curl -sLo tailwindcss https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-arm64 curl -sLo tailwindcss https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-arm64-musl curl -sLo tailwindcss https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-x64 curl -sLo tailwindcss https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-x64-musl # macOSApple Silicon 与 Intel curl -sLo tailwindcss https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-arm64 curl -sLo tailwindcss https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-x64 # Windows curl -sLo tailwindcss.exe https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-windows-x64.exeLinux 与 macOS 需要赋予执行权限chmod x tailwindcss版本与可用平台说明以上命名规则tailwindcss-linux-arm64、tailwindcss-windows-x64.exe等与快速安装脚本中build_filename的拼装逻辑一致实际可用的二进制列表以 Tailwind CSS 发布页面为准。若你的系统架构不在上述列表中脚本会输出Unsupported system并中止。第二步获取 daisyUI bundle 文件下载最新版 daisyUI 的单文件 bundle并放到与 Tailwind 可执行文件相同的目录curl -sLO https://github.com/saadeghi/daisyui/releases/latest/download/daisyui.mjs curl -sLO https://github.com/saadeghi/daisyui/releases/latest/download/daisyui-theme.mjs这两个文件在仓库中的对应物是 packages/bundle/daisyui.mjs完整组件库 bundle约 1144 行与 packages/bundle/daisyui-theme.mjs主题插件 bundle。它们是把 daisyUI 源码按 ESM 格式打包成单一.mjs文件的产物内置全部组件样式与主题定义可直接被 Tailwind 的plugin指令消费。第三步编写 input.css 入口文件创建input.css引入 Tailwind CSS 与 daisyUI并在source函数中指定你的 HTML 及其他标记文件位置import tailwindcss; source not ./tailwindcss; source not ./daisyui{,*}.mjs; plugin ./daisyui.mjs; /* 可选自定义主题。完整主题配置参考 docs/themes 页面 */ plugin ./daisyui-theme.mjs{ /* 在此编写自定义主题 */ }这段配置逐行说明import tailwindcssTailwind CSS v4 的入口加载核心引擎source not ./tailwindcss告诉 Tailwind 不要扫描刚才下载的二进制文件Windows 上对应source not ./tailwindcss.exesource not ./daisyui{,*}.mjs排除 daisyUI 的两个.mjsbundle 文件避免被当作内容源扫描{,*}同时匹配daisyui.mjs与daisyui-theme.mjsplugin ./daisyui.mjs以本地相对路径方式加载 daisyUI 插件注册全部组件类与默认主题plugin ./daisyui-theme.mjs{}可选的主题插件用于定义自定义主题详见后文。第四步构建 CSS使用 Tailwind 可执行文件构建./tailwindcss -i input.css -o output.css --watch # Windows tailwindcss.exe -i input.css -o output.css --watch-i指定入口文件input.css-o指定输出文件output.css添加--watch后Tailwind 会监听文件变化改动input.css或标记文件时自动重新生成output.css适合本地开发在 CI/CD 中不加--watch直接运行一次一次性生成output.css即可。构建成功后即可在 HTML 中使用 daisyUI 的类名例如button classbtn btn-primary、div classcard等。认识 bundledaisyui.mjs 内部结构与主题机制手动安装之所以只需要两个.mjs文件是因为 daisyui.mjs 已经把插件注册、主题顺序与选项解析全部打包进单一文件。从 bundle 源码可以看出它由三部分拼接而成主题顺序表themeOrder内置的 35 个主题按固定顺序排列light、dark、cupcake……直至silk该顺序直接影响themes: all时主题注册的先后插件选项处理器pluginOptionsHandler来自 packages/daisyui/functions/pluginOptionsHandler.js负责解析plugin daisyui {}中的配置主题对象object内置主题的完整 CSS 变量定义如--color-base-100、--color-primary、--radius-box等使用 OKLCH 颜色空间表达。plugin 选项themes / prefix / root 等从 pluginOptionsHandler.js 的源码可以看到plugin daisyui支持的选项及默认值如下选项默认值作用logstrue首次运行时是否在控制台打印版本横幅设为false可关闭root:root主题变量挂载的根选择器themeslight --default, dark --prefersdark启用的主题列表逗号分隔--default标记默认主题--prefersdark标记深色模式主题也可设为all启用全部或false关闭所有主题include/exclude无控制组件类别的包含与排除prefix空字符串为所有类名添加前缀例如在 CSS 中仅启用light与cupcake并把light设为默认主题import tailwindcss; plugin ./daisyui.mjs { themes: light --default, cupcake; }对应源码中pluginOptionsHandler会先处理带--default的主题生成:where(:root),…选择器使其作为默认样式再处理带--prefersdark的主题生成media (prefers-color-scheme: dark)规则最后为其余主题生成基于[data-theme...]与:has(input.theme-controller...)的选择器。因此主题切换data-theme属性或theme-controller复选框在 Standalone 模式下与 npm 安装模式行为完全一致。自定义主题daisyui-theme.mjs 的选项plugin ./daisyui-theme.mjs {}的完整实现对应源码 packages/daisyui/functions/themePlugin.jsbundle 中为 daisyui-theme.mjs支持以下选项选项默认值作用namecustom-theme主题名称用于data-theme属性defaultfalse是否设为默认主题prefersdarkfalse是否作为系统深色模式主题color-scheme无浏览器原生 UI滚动条、表单控件等的配色倾向root:root主题变量挂载的根选择器其余 CSS 变量无自定义--color-*、--radius-*、--size-*、--border、--depth、--noise等设计令牌主题名相同的 CSS 变量示例plugin ./daisyui-theme.mjs { name: mytheme; default: true; color-scheme: light; --color-base-100: oklch(98% 0.02 240); --color-primary: oklch(55% 0.3 240); --color-primary-content: oklch(98% 0.01 240); }从源码可见themePlugin会把自定义变量与同名内置主题合并若name命中了内置主题如emerald则会以内置主题为基础叠加你的覆盖项最终以[data-thememytheme]与:has(input.theme-controller[valuemytheme]:checked)选择器输出default: true时额外追加:where(:root)使其成为默认主题。主题变量完整清单可参考 packages/daisyui/functions/variables.css 与文档 主题配置/docs/themes/page.md)。常见问题与使用建议构建产物如何引入output.css是纯 CSS 文件直接用link relstylesheet hrefoutput.css引入即可不需要任何运行时 JS主题切换功能由 CSS 选择器驱动同样无需 JS。CI/CD 集成在流水线中执行不带--watch的构建命令生成一次output.css并作为构建产物发布即可快速安装脚本本身就是一条可直接放进流水线的单行命令。版本一致性Standalone 模式依赖 Tailwind CSS v4 的plugin/source指令语法请确保下载的是支持该语法的 Tailwind Standalone 版本source排除规则要与实际下载的文件名一致Linux/macOS 为tailwindcssWindows 为tailwindcss.exe。快速安装的目标目录bash 脚本支持通过第一个参数指定安装目录DEST_PATH${1:-.}例如curl -sL daisyui.com/fast | bash -s /path/to/dir未传参时默认安装到当前目录。【免费下载链接】daisyui The most popular, free and open-source Tailwind CSS component library项目地址: https://gitcode.com/GitHub_Trending/da/daisyui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考