daisyUI 如何从 4 升级到 5 并迁移到 Tailwind CSS 4 的 CSS 配置【免费下载链接】daisyui The most popular, free and open-source Tailwind CSS component library项目地址: https://gitcode.com/GitHub_Trending/da/daisyui如果你的项目还在用 daisyUI 4通过tailwind.config.js里的plugins: [require(daisyui)]引入升级到 daisyUI 5 时同时会跨过 Tailwind CSS 3 到 4 的分界线daisyUI 的配置不再写在tailwind.config.js而是直接写在 CSS 文件里用plugin daisyui { ... }的形式。这条迁移路径是官方的先移除旧配置、运行 Tailwind CSS 4 升级工具、安装 daisyUI 5、把配置改写进 CSS最后处理重命名和删除的类名。下面的步骤全部来自仓库 docs 目录下的升级指南与 v5 发布说明。升级前需要准备什么升级指南要求动手前先读三样东西Tailwind CSS 4 的 breaking changes即 Tailwind CSS 官方升级指南中 changes from v3 部分daisyUI 5 release notes仓库内为packages/docs/src/routes/(routes)/docs/v5/page(routes).mddaisyUI 5 的 breaking changes 列表即升级指南自身的 Changes from v4 一节。适用前提项目使用 npm 安装依赖且当前 daisyUI 4 配置写在tailwind.config.js中。第一步从 tailwind.config.js 中移除 daisyUITailwind CSS 提供了一个自动升级 CLI它会替你应用 Tailwind CSS 4 的新变化。但在运行它之前必须先把 daisyUI 和插件从tailwind.config.js里删掉让升级工具能安全地把配置替换成 CSS 文件module.exports { content: [./your-files/**/*.{html,js}], // other stuff... - daisyui: { - themes: [light, dark, cupcake], - }, - plugins: [require(daisyui)], }第二步运行 Tailwind CSS 4 升级工具npx tailwindcss/upgrade注意副作用这个命令由 Tailwind CSS 官方提供会直接修改你项目里的文件和配置把项目升级到 Tailwind CSS 4 所需的结构例如生成import tailwindcss的 CSS 入口。运行前请确认项目处于可提交状态方便对比工具改了什么。第三步安装 daisyUI 5npm i -D daisyuilatest第四步把 daisyUI 配置写进 CSS 文件在项目的 CSS 入口文件如app.css中加入 daisyUIimport tailwindcss; plugin daisyui;如果要启用内置主题把分号换成大括号在括号里写themesimport tailwindcss; plugin daisyui { themes: light --default, dark --prefersdark, cupcake; }themes是逗号分隔的主题名列表主题名后的--default标记该主题为默认主题--prefersdark标记该主题为深色模式prefers-color-scheme: dark下的默认主题。daisyUI 5 的 CSS 配置默认值如下来自 Config 文档源文件为packages/docs/src/routes/(routes)/docs/config/page.mdplugin daisyui { themes: light --default, dark --prefersdark; root: :root; include: ; exclude: ; prefix: ; logs: true; }如果你在 v4 的tailwind.config.js里用过其他配置项按下表迁移来自 v5 release notes 的 Breaking changes in configv4 配置tailwind.config.jsv5 配置CSSdaisyui: {...}plugins: [require(daisyui)]plugin daisyui { ... }写在 CSS 里不再需要tailwind.config.jsthemes数组themes逗号分隔的主题名列表darkTheme已删除改用主题列表里的--prefersdark标记themeRoot改名为root接收 CSS 变量的选择器默认:rootstyled: false已删除改用include/exclude按需包含或排除部分base: false已删除改用include/excludeutils: false已删除改用include/exclude例如只包含按钮和输入组件plugin daisyui { include: button, input, select; }exclude用法相同例如exclude: rootscrollgutter;会排除 modal 或 drawer 打开时加在:root上的滚动条占位样式。prefix用于给所有 daisyUI 类名加前缀如prefix: d-;后btn变成d-btnlogs: false可以关闭构建时的 daisyUI 日志输出。第五步处理重命名和删除的类名升级指南把 v4 到 v5 的 HTML 变化总结为约 15 处并明确说明你不需要全部处理只需改你实际用到的部分。主要对照如下v4 类名v5 变化artboard、phone-1到phone-6删除改用 Tailwind 的w-*/h-*如artboard phone-1改w-[320px] h-[568px]avatar的online/offline/placeholder重命名为avatar-online/avatar-offline/avatar-placeholderbtm-nav、btm-nav-xs到btm-nav-lg、btm-nav-active改用dock、dock-xs到dock-lg、dock-activecard-bordered重命名为card-bordercard-compact改用card-smmenu项的disabled/active/focus重命名为menu-disabled/menu-active/menu-focustabs-bordered/tabs-lifted/tabs-boxed重命名为tabs-border/tabs-lift/tabs-boxfile-input-bordered删除file input 现在默认带边框想去掉边框用file-input-ghostinput-border/input-bordered删除input 现在默认带边框想去掉边框用input-ghostselect-border删除select 现在默认带边框想去掉边框用select-ghosttextarea-border删除textarea 现在默认带边框想去掉边框用textarea-ghostform-control、label-text、label-text-alt删除建议改用新的fieldset和label写法btn-group、input-group删除2023 年已弃用改用join表格行classhover删除改用hover:bg-base-300等 Tailwind 写法footer横向布局footer 现在默认纵向横向要显式加footer-horizontal如md:footer-horizontalmockup-phone 的camera/display重命名为mockup-phone-camera/mockup-phone-display两个结构性示例来自升级指南的 diff- div classbtm-nav btm-nav-sm div classdock dock-sm button/button - button classactive/button button classdock-active/button button⚙️/button /divfieldset classfieldset legendLogin/legend label classlabel fornameName/label input idname classinput placeholderName / /fieldset另外还有几处默认行为变化要留意input和select现在有 20rem 的默认宽度不再需要w-full max-w-xsmenu的纵向菜单不再默认w-full需要全宽时要显式加stats背景色默认透明需要背景时自己加bg-base-100stack的尺寸改由stack本身设置不再设置每个子项的宽高。如果你自定义过主题CSS 变量名变化v5 把所有主题变量名对齐到 Tailwind CSS 4 语法并改成可读的完整名称来自 v5 release notes 的 Breaking changes in themesv4 变量v5 变量--p/--pc--color-primary/--color-primary-content--s/--sc--color-secondary/--color-secondary-content--a/--ac--color-accent/--color-accent-content--n/--nc--color-neutral/--color-neutral-content--b1/--b2/--b3/--bc--color-base-100/--color-base-200/--color-base-300/--color-base-content--in/--inc等状态色--color-info/--color-info-content等--rounded-box--radius-box--rounded-btn和--tab-radius--radius-field--rounded-badge--radius-selector--border-btn和--tab-border--border同时删除了--animation-btn、--animation-input、--btn-focus-scale三个变量不再需要。如果你用到了cyberpunk或wireframe主题注意它们不再默认带自定义字体需要按 v5 release notes 给出的示例用plugin daisyui/theme { name: cyberpunk; font-family: ... }把 v4 的字体加回去。另外 v5 移除了基于背景色自动计算*-content颜色的机制如果你希望保留 v4 的旧主题色release notes 提到官方准备了一个包含全部 daisyUI 4 主题色的仓库可以复制粘贴进 daisyUI 5 使用。如何验证迁移完成升级指南的验收标准是完成上述步骤后 everything should work as expected。具体可以按这几项核对重建项目并打开页面确认 daisyUI 组件按钮、卡片、输入框等仍然有样式、主题切换仍然生效用上面的类名对照表在项目代码里搜索旧类名如btm-nav、card-compact、form-control、btn-group、input-bordered确认没有遗漏自定义过主题的项目打开浏览器 devtools 检查变量是否为新的--color-*、--radius-*名称。v5 的变量是标准颜色格式可以在 devtools 里直接改值验证主题变量确实生效。限制与后续已删除的类名btn-group、input-group、artboard、phone-*、form-control、label-text、label-text-alt等在 v5 中不再存在HTML 结构可以保留但不会再生效必须按上表替换升级后 daisyUI 5 只走 CSS 里的plugin配置tailwind.config.js中不再有任何 daisyUI 配置项每个组件的完整变化清单在仓库 docs 的 changelog 页和 v5 release notes 的详细 Changelog 一节中可按组件逐个核对。【免费下载链接】daisyui The most popular, free and open-source Tailwind CSS component library项目地址: https://gitcode.com/GitHub_Trending/da/daisyui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考