尧图网站建设 
在 Eleventy 静态站点中集成 Tailwind CSS 4 与 daisyUI 5从零到可运行【免费下载链接】daisyui The most popular, free and open-source Tailwind CSS component library项目地址: https://gitcode.com/GitHub_Trending/da/daisyui本篇指南以 daisyUI 官方安装文档为核心完整讲解如何在 Eleventy11ty静态站点生成器中搭建 Tailwind CSS 4 daisyUI 5 开发环境。你将掌握 Eleventy 与 PostCSS 构建管线的接线方式、Tailwind v4 的 CSS-first 配置语法import/plugin、以及 daisyUI 插件在源码层面的工作机理最终能够在新旧 Eleventy 项目中快速复现一套可用的组件化样式体系。前置条件在开始之前请确保本机已安装 Node.js建议使用较新的 LTS 版本保证11ty/eleventy、tailwindcss4、daisyui5等依赖能够正常解析与执行。本指南的所有命令均在项目根目录的终端中运行无需全局安装任何工具——全部依赖都通过npm以项目本地方式管理。关于版本口径本仓库当前的 daisyUI 为 5.x见 packages/daisyui/package.json其构建方式建立在 Tailwind CSS v4 的 CSS-first 配置之上因此下文使用的import tailwindcss与plugin daisyui语法是 v4 专属写法与旧版 Tailwind 的tailwind.config.jstailwind base/components/utilities三件套有本质区别。第 1 步初始化 Node 项目并添加 dev / build 脚本Eleventy 是一个纯 Node 生态的静态站点生成器因此第一步先初始化package.json并写入两个核心脚本npm init -y npm pkg set scripts.develeventy --serve npm pkg set scripts.buildeleventynpm run dev以开发模式启动 Eleventy--serve参数会启用本地开发服务器并监听文件变化自动重建、热刷新浏览器。npm run build执行一次完整的静态构建产出最终站点文件。仓库中 docs 站点的构建也遵循类似的思路——它使用 SvelteKit 而非 11ty但同样是开发命令 构建命令的双脚本模式见 packages/docs/package.json。对 Eleventy 项目而言这两条命令即构成了后续所有构建动作的入口。第 2 步安装 11ty、PostCSS、Tailwind CSS 及其插件、daisyUIEleventy 本身不负责编译 CSS我们需要引入 PostCSS 作为 CSS 处理管线再在其上叠加 Tailwind CSS 4 与 daisyUInpm install 11ty/eleventy postcss tailwindcsslatest tailwindcss/postcsslatest tailwindcss/typographylatest daisyuilatest逐项拆解每个依赖的职责依赖职责11ty/eleventy静态站点生成器负责读取src下的模板与内容产出dist站点postcssCSS 转换管线的基础设施允许以插件链的方式处理样式tailwindcsslatestTailwind CSS v4 核心提供原子化工具类引擎tailwindcss/postcsslatestTailwind v4 的 PostCSS 入口插件是 v4 替代旧版tailwindcssPostCSS 插件的关键组件tailwindcss/typographylatest官方排版插件为 Markdown 渲染出的 HTML 提供prose排版样式daisyuilatest本项目的组件库作为 Tailwind 插件被加载其中tailwindcss/postcss是 Tailwind v4 与 PostCSS 之间的桥接层——它负责扫描源文件、解析import tailwindcss与plugin指令、生成工具类并输出编译后的 CSS。daisyUI 5 正是依赖这一机制以插件形式挂载到 Tailwind 之上的。第 3 步创建布局模板Nunjucks LayoutEleventy 使用目录约定组织内容src是输入目录_includes存放可复用的布局模板Nunjucks.njk是其默认模板语言之一。创建src/_includes/layouts/default.njk--- title: My Blog --- !doctype html html langen head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title{{ title }}/title link relstylesheet href/styles/index.css /head body classprose {{ content | safe }} /body /html几个要点顶部的 YAML Front Matter 定义了页面级数据{{ title }}在模板中输出该数据。link relstylesheet href/styles/index.css指向第 6 步中由 PostCSS 管线生成到dist/styles/index.css的编译产物。body classprose启用tailwindcss/typography插件提供的排版样式让 Markdown 渲染出的标题、段落、列表、代码块拥有美观的默认排版。这也是为什么第 4 步的首页中daisyUI 按钮需要用not-prose包裹——prose会重置其内部的默认样式而not-prose用于在排版范围内恢复 Tailwind 工具类的正常表现。第 4 步创建 Markdown 首页创建src/index.mdEleventy 会将其渲染为站点首页并通过 Front Matter 中的layout字段套用上一步的默认布局--- layout: layouts/default.njk --- # Markdown heading 1 ## Markdown heading 2 ### Markdown heading 3 div classnot-prose button classbtndaisyUI Button/button /div这里同时演示了两个要点Markdown 标题由prose排版插件美化div classnot-prose包裹的button classbtn则展示了 daisyUI 的第一个组件类。btn是 daisyUI 组件体系中最基础的按钮类只需添加这一个 class 即可获得完整的按钮视觉与交互样式悬停、焦点、禁用等状态均由组件样式内置。第 5 步创建 CSS 文件Tailwind v4 的 CSS-first 配置这是 Tailwind v4 与传统版本差异最大的地方不再需要tailwind.config.js里声明plugins数组而是直接在 CSS 文件中用指令声明。创建src/styles/index.cssimport tailwindcss; plugin tailwindcss/typography; plugin daisyui;import tailwindcss导入 Tailwind v4 全部基础能力reset、主题变量、工具类。plugin tailwindcss/typography以 CSS 指令方式加载排版插件。plugin daisyui以 CSS 指令方式加载 daisyUI。这一行就是整个集成方案的开关——daisyUI 的所有组件、主题与工具类都会在构建时注入最终的 CSS。需要留意的是与 Tailwind 官方为 Astro、Vite 等框架提供的接入方式相比例如 Astro 在 astro.config.mjs/docs/install/astro/page.md) 中通过tailwindcss/vite插件接入Eleventy 没有官方的 Vite 集成因此本方案采用PostCSS 手动管线——这也是为什么我们要自行编写第 6 步的构建钩子。第 6 步创建 eleventy.config.mjsPostCSS 构建钩子Eleventy 4.x 支持 ESM 配置文件。在项目根目录创建eleventy.config.mjs利用 Eleventy 的eleventy.before事件钩子在每次构建前通过 PostCSS 将src/styles/index.css编译输出到dist/styles/index.cssimport fs from fs; import path from path; import postcss from postcss; import tailwindcss from tailwindcss/postcss; export default function (eleventyConfig) { eleventyConfig.on(eleventy.before, async () { const tailwindInputPath path.resolve(./src/styles/index.css); const tailwindOutputPath ./dist/styles/index.css; const cssContent fs.readFileSync(tailwindInputPath, utf8); const outputDir path.dirname(tailwindOutputPath); if (!fs.existsSync(outputDir)) { fs.mkdirSync(outputDir, { recursive: true }); } const result await postcss([tailwindcss()]).process(cssContent, { from: tailwindInputPath, to: tailwindOutputPath, }); fs.writeFileSync(tailwindOutputPath, result.css); }); return { dir: { input: src, output: dist }, }; }这段配置是整条构建链的核心拆解其执行流程钩子时机eleventy.before在每次构建含--serve的增量重建开始前触发保证 CSS 始终在页面生成前就绪。输入输出读取src/styles/index.css编译结果写入dist/styles/index.css输出目录不存在时先递归创建。PostCSS 管线postcss([tailwindcss()])以tailwindcss/postcss为唯一插件处理 CSS 内容。正是这一层负责展开第 5 步 CSS 文件中的import与plugin指令——daisyUI 的组件样式在此被展开并写入产物。目录映射dir: { input: src, output: dist }定义了 Eleventy 的内容输入目录与构建输出目录与布局模板中的/styles/index.css引用路径一一对应。这也与仓库中 daisyUI 自身的构建思想一致daisyUI 在 packages/daisyui/package.json 中通过bun build.js把base、components、utilities等模块编译为daisyui.css、themes.css等产物本质同样是源码 → 构建管线 → 产物 CSS的流程。第 7 步运行项目npm run dev启动后访问--serve输出的本地地址默认http://localhost:8080。此时首页中Markdown 的三个标题应显示为排版美观的prose样式btn按钮应呈现 daisyUI 默认主题下的完整按钮视觉。至此daisyUI 的类名已可随意使用——第 4 步中的btn只是起点你可以继续引入card、navbar、modal、tooltip等组件类它们都依赖这套已打通的构建链。深入daisyUI 插件在源码层面如何工作理解构建链之后再看 daisyUI 在这条链路中的真实角色。daisyUI 的入口位于 packages/daisyui/index.js它通过plugin.withOptions(...)导出一个标准的 Tailwind 插件对象withOptions包装器见 packages/daisyui/functions/plugin.js负责把配置选项 → 插件处理器的映射标准化最终返回{ handler, config }交给 Tailwind 执行。handler内部接收addBase、addComponents、addUtilities、addVariant四个 API基础样式reset、根变量经addBase注入组件样式经addComponents注入并且会被 nestCssLayers.js 包裹进 CSS 层以控制优先级工具类经addUtilities注入此外还为drawer组件注册了is-drawer-open/is-drawer-close两个自定义变体。config部分将 daisyUI 的主题变量合并进 Tailwind 的theme.extend从而让bg-base-100、text-primary这类语义化颜色类直接可用。这与第 5 步中plugin daisyui的加载路径完全吻合Tailwind v4 读到该指令后实例化上述插件把 daisyUI 的组件与主题注入当前构建。主题与选项pluginOptionsHandler 的默认行为daisyUI 的多数配置项如themes、prefix、logs、include/exclude在 packages/daisyui/functions/pluginOptionsHandler.js 中被统一解析其默认值即对应本文零配置的集成结果themes默认[light --default, dark --prefersdark]即默认启用 light 主题并在系统处于深色模式时自动切换 dark 主题--default标志将主题挂到:root上--prefersdark标志则挂到media (prefers-color-scheme: dark)下的:root:not([data-theme])选择器上。prefix默认空字符串。若设置为daisy-则所有组件类变为daisy-btn、daisy-card等同时主题控制器类名也会带上前缀源码中通过${prefix}theme-controller拼接。logs默认true首次构建时在控制台打印带版本号的欢迎横幅daisyUI version可显式设为false关闭。include/exclude用于按需选择 base / components / utilities 中的模块控制最终产物体积。这些选项均可通过 Tailwind v4 的plugin daisyui { ... }块级写法传入例如import tailwindcss; plugin daisyui { themes: light --default, dark; prefix: daisy-; logs: false; }若需要完全自定义主题daisyUI 还提供了独立的主题插件 packages/daisyui/functions/themePlugin.js支持通过name、default、prefersdark、root与自定义色板 token 生成[data-themecustom-theme]选择器当自定义主题名与内置主题同名时会以内置主题为基底、用自定义 token 覆盖合并。常见问题与调优提示prose与 daisyUI 组件的冲突typography插件会重置内容内元素的默认样式。若 daisyUI 组件在 Markdown 内容中表现异常用not-prose包裹组件即可如第 4 步所示。样式不生效先确认eleventy.config.mjs的输入输出路径与布局模板中的link引用路径一致默认均为src/styles/index.css→dist/styles/index.css并确认npm run dev控制台没有 PostCSS 报错。版本一致性安装时使用latest可保证 Tailwind 4 与 daisyUI 5 的 CSS-first 语法匹配若项目此前使用 Tailwind 3需要迁移到 v4 的import/plugin写法后才能与本指南的配置对齐。进一步参考仓库内还提供了 PostCSS 直连方案 packages/docs/src/routes/(routes)/docs/install/postcss/page.md/docs/install/postcss/page.md) 以及其他框架的安装指南install 目录/docs/install/)Eleventy 方案与其底层管线一致可互相印证。至此你已经拥有一个运行在 Eleventy 之上、集成 Tailwind CSS 4 daisyUI 5 的完整开发环境。无论是内容博客还是文档站点都可以在此基础上直接使用 daisyUI 的全部组件与主题体系。【免费下载链接】daisyui The most popular, free and open-source Tailwind CSS component library项目地址: https://gitcode.com/GitHub_Trending/da/daisyui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 在 Eleventy 静态站点中集成 Tailwind CSS 4 与 daisyUI 5：从零到可运行
在 Eleventy 静态站点中集成 Tailwind CSS 4 与 daisyUI 5从零到可运行【免费下载链接】daisyui The most popular, free and open-source Tailwind CSS component library项目地址: https://gitcode.com/GitHub_Trending/da/daisyui本篇指南以 daisyUI 官方安装文档为核心完整讲解如何在 Eleventy11ty静态站点生成器中搭建 Tailwind CSS 4 daisyUI 5 开发环境。你将掌握 Eleventy 与 PostCSS 构建管线的接线方式、Tailwind v4 的 CSS-first 配置语法import/plugin、以及 daisyUI 插件在源码层面的工作机理最终能够在新旧 Eleventy 项目中快速复现一套可用的组件化样式体系。前置条件在开始之前请确保本机已安装 Node.js建议使用较新的 LTS 版本保证11ty/eleventy、tailwindcss4、daisyui5等依赖能够正常解析与执行。本指南的所有命令均在项目根目录的终端中运行无需全局安装任何工具——全部依赖都通过npm以项目本地方式管理。关于版本口径本仓库当前的 daisyUI 为 5.x见 packages/daisyui/package.json其构建方式建立在 Tailwind CSS v4 的 CSS-first 配置之上因此下文使用的import tailwindcss与plugin daisyui语法是 v4 专属写法与旧版 Tailwind 的tailwind.config.jstailwind base/components/utilities三件套有本质区别。第 1 步初始化 Node 项目并添加 dev / build 脚本Eleventy 是一个纯 Node 生态的静态站点生成器因此第一步先初始化package.json并写入两个核心脚本npm init -y npm pkg set scripts.develeventy --serve npm pkg set scripts.buildeleventynpm run dev以开发模式启动 Eleventy--serve参数会启用本地开发服务器并监听文件变化自动重建、热刷新浏览器。npm run build执行一次完整的静态构建产出最终站点文件。仓库中 docs 站点的构建也遵循类似的思路——它使用 SvelteKit 而非 11ty但同样是开发命令 构建命令的双脚本模式见 packages/docs/package.json。对 Eleventy 项目而言这两条命令即构成了后续所有构建动作的入口。第 2 步安装 11ty、PostCSS、Tailwind CSS 及其插件、daisyUIEleventy 本身不负责编译 CSS我们需要引入 PostCSS 作为 CSS 处理管线再在其上叠加 Tailwind CSS 4 与 daisyUInpm install 11ty/eleventy postcss tailwindcsslatest tailwindcss/postcsslatest tailwindcss/typographylatest daisyuilatest逐项拆解每个依赖的职责依赖职责11ty/eleventy静态站点生成器负责读取src下的模板与内容产出dist站点postcssCSS 转换管线的基础设施允许以插件链的方式处理样式tailwindcsslatestTailwind CSS v4 核心提供原子化工具类引擎tailwindcss/postcsslatestTailwind v4 的 PostCSS 入口插件是 v4 替代旧版tailwindcssPostCSS 插件的关键组件tailwindcss/typographylatest官方排版插件为 Markdown 渲染出的 HTML 提供prose排版样式daisyuilatest本项目的组件库作为 Tailwind 插件被加载其中tailwindcss/postcss是 Tailwind v4 与 PostCSS 之间的桥接层——它负责扫描源文件、解析import tailwindcss与plugin指令、生成工具类并输出编译后的 CSS。daisyUI 5 正是依赖这一机制以插件形式挂载到 Tailwind 之上的。第 3 步创建布局模板Nunjucks LayoutEleventy 使用目录约定组织内容src是输入目录_includes存放可复用的布局模板Nunjucks.njk是其默认模板语言之一。创建src/_includes/layouts/default.njk--- title: My Blog --- !doctype html html langen head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title{{ title }}/title link relstylesheet href/styles/index.css /head body classprose {{ content | safe }} /body /html几个要点顶部的 YAML Front Matter 定义了页面级数据{{ title }}在模板中输出该数据。link relstylesheet href/styles/index.css指向第 6 步中由 PostCSS 管线生成到dist/styles/index.css的编译产物。body classprose启用tailwindcss/typography插件提供的排版样式让 Markdown 渲染出的标题、段落、列表、代码块拥有美观的默认排版。这也是为什么第 4 步的首页中daisyUI 按钮需要用not-prose包裹——prose会重置其内部的默认样式而not-prose用于在排版范围内恢复 Tailwind 工具类的正常表现。第 4 步创建 Markdown 首页创建src/index.mdEleventy 会将其渲染为站点首页并通过 Front Matter 中的layout字段套用上一步的默认布局--- layout: layouts/default.njk --- # Markdown heading 1 ## Markdown heading 2 ### Markdown heading 3 div classnot-prose button classbtndaisyUI Button/button /div这里同时演示了两个要点Markdown 标题由prose排版插件美化div classnot-prose包裹的button classbtn则展示了 daisyUI 的第一个组件类。btn是 daisyUI 组件体系中最基础的按钮类只需添加这一个 class 即可获得完整的按钮视觉与交互样式悬停、焦点、禁用等状态均由组件样式内置。第 5 步创建 CSS 文件Tailwind v4 的 CSS-first 配置这是 Tailwind v4 与传统版本差异最大的地方不再需要tailwind.config.js里声明plugins数组而是直接在 CSS 文件中用指令声明。创建src/styles/index.cssimport tailwindcss; plugin tailwindcss/typography; plugin daisyui;import tailwindcss导入 Tailwind v4 全部基础能力reset、主题变量、工具类。plugin tailwindcss/typography以 CSS 指令方式加载排版插件。plugin daisyui以 CSS 指令方式加载 daisyUI。这一行就是整个集成方案的开关——daisyUI 的所有组件、主题与工具类都会在构建时注入最终的 CSS。需要留意的是与 Tailwind 官方为 Astro、Vite 等框架提供的接入方式相比例如 Astro 在 astro.config.mjs/docs/install/astro/page.md) 中通过tailwindcss/vite插件接入Eleventy 没有官方的 Vite 集成因此本方案采用PostCSS 手动管线——这也是为什么我们要自行编写第 6 步的构建钩子。第 6 步创建 eleventy.config.mjsPostCSS 构建钩子Eleventy 4.x 支持 ESM 配置文件。在项目根目录创建eleventy.config.mjs利用 Eleventy 的eleventy.before事件钩子在每次构建前通过 PostCSS 将src/styles/index.css编译输出到dist/styles/index.cssimport fs from fs; import path from path; import postcss from postcss; import tailwindcss from tailwindcss/postcss; export default function (eleventyConfig) { eleventyConfig.on(eleventy.before, async () { const tailwindInputPath path.resolve(./src/styles/index.css); const tailwindOutputPath ./dist/styles/index.css; const cssContent fs.readFileSync(tailwindInputPath, utf8); const outputDir path.dirname(tailwindOutputPath); if (!fs.existsSync(outputDir)) { fs.mkdirSync(outputDir, { recursive: true }); } const result await postcss([tailwindcss()]).process(cssContent, { from: tailwindInputPath, to: tailwindOutputPath, }); fs.writeFileSync(tailwindOutputPath, result.css); }); return { dir: { input: src, output: dist }, }; }这段配置是整条构建链的核心拆解其执行流程钩子时机eleventy.before在每次构建含--serve的增量重建开始前触发保证 CSS 始终在页面生成前就绪。输入输出读取src/styles/index.css编译结果写入dist/styles/index.css输出目录不存在时先递归创建。PostCSS 管线postcss([tailwindcss()])以tailwindcss/postcss为唯一插件处理 CSS 内容。正是这一层负责展开第 5 步 CSS 文件中的import与plugin指令——daisyUI 的组件样式在此被展开并写入产物。目录映射dir: { input: src, output: dist }定义了 Eleventy 的内容输入目录与构建输出目录与布局模板中的/styles/index.css引用路径一一对应。这也与仓库中 daisyUI 自身的构建思想一致daisyUI 在 packages/daisyui/package.json 中通过bun build.js把base、components、utilities等模块编译为daisyui.css、themes.css等产物本质同样是源码 → 构建管线 → 产物 CSS的流程。第 7 步运行项目npm run dev启动后访问--serve输出的本地地址默认http://localhost:8080。此时首页中Markdown 的三个标题应显示为排版美观的prose样式btn按钮应呈现 daisyUI 默认主题下的完整按钮视觉。至此daisyUI 的类名已可随意使用——第 4 步中的btn只是起点你可以继续引入card、navbar、modal、tooltip等组件类它们都依赖这套已打通的构建链。深入daisyUI 插件在源码层面如何工作理解构建链之后再看 daisyUI 在这条链路中的真实角色。daisyUI 的入口位于 packages/daisyui/index.js它通过plugin.withOptions(...)导出一个标准的 Tailwind 插件对象withOptions包装器见 packages/daisyui/functions/plugin.js负责把配置选项 → 插件处理器的映射标准化最终返回{ handler, config }交给 Tailwind 执行。handler内部接收addBase、addComponents、addUtilities、addVariant四个 API基础样式reset、根变量经addBase注入组件样式经addComponents注入并且会被 nestCssLayers.js 包裹进 CSS 层以控制优先级工具类经addUtilities注入此外还为drawer组件注册了is-drawer-open/is-drawer-close两个自定义变体。config部分将 daisyUI 的主题变量合并进 Tailwind 的theme.extend从而让bg-base-100、text-primary这类语义化颜色类直接可用。这与第 5 步中plugin daisyui的加载路径完全吻合Tailwind v4 读到该指令后实例化上述插件把 daisyUI 的组件与主题注入当前构建。主题与选项pluginOptionsHandler 的默认行为daisyUI 的多数配置项如themes、prefix、logs、include/exclude在 packages/daisyui/functions/pluginOptionsHandler.js 中被统一解析其默认值即对应本文零配置的集成结果themes默认[light --default, dark --prefersdark]即默认启用 light 主题并在系统处于深色模式时自动切换 dark 主题--default标志将主题挂到:root上--prefersdark标志则挂到media (prefers-color-scheme: dark)下的:root:not([data-theme])选择器上。prefix默认空字符串。若设置为daisy-则所有组件类变为daisy-btn、daisy-card等同时主题控制器类名也会带上前缀源码中通过${prefix}theme-controller拼接。logs默认true首次构建时在控制台打印带版本号的欢迎横幅daisyUI version可显式设为false关闭。include/exclude用于按需选择 base / components / utilities 中的模块控制最终产物体积。这些选项均可通过 Tailwind v4 的plugin daisyui { ... }块级写法传入例如import tailwindcss; plugin daisyui { themes: light --default, dark; prefix: daisy-; logs: false; }若需要完全自定义主题daisyUI 还提供了独立的主题插件 packages/daisyui/functions/themePlugin.js支持通过name、default、prefersdark、root与自定义色板 token 生成[data-themecustom-theme]选择器当自定义主题名与内置主题同名时会以内置主题为基底、用自定义 token 覆盖合并。常见问题与调优提示prose与 daisyUI 组件的冲突typography插件会重置内容内元素的默认样式。若 daisyUI 组件在 Markdown 内容中表现异常用not-prose包裹组件即可如第 4 步所示。样式不生效先确认eleventy.config.mjs的输入输出路径与布局模板中的link引用路径一致默认均为src/styles/index.css→dist/styles/index.css并确认npm run dev控制台没有 PostCSS 报错。版本一致性安装时使用latest可保证 Tailwind 4 与 daisyUI 5 的 CSS-first 语法匹配若项目此前使用 Tailwind 3需要迁移到 v4 的import/plugin写法后才能与本指南的配置对齐。进一步参考仓库内还提供了 PostCSS 直连方案 packages/docs/src/routes/(routes)/docs/install/postcss/page.md/docs/install/postcss/page.md) 以及其他框架的安装指南install 目录/docs/install/)Eleventy 方案与其底层管线一致可互相印证。至此你已经拥有一个运行在 Eleventy 之上、集成 Tailwind CSS 4 daisyUI 5 的完整开发环境。无论是内容博客还是文档站点都可以在此基础上直接使用 daisyUI 的全部组件与主题体系。【免费下载链接】daisyui The most popular, free and open-source Tailwind CSS component library项目地址: https://gitcode.com/GitHub_Trending/da/daisyui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考