Tailwind v4

TailwindCSS v4 已自 2.8.0 起可用！本指南将帮助您将现有的 TailwindCSS v4 项目迁移到 HeroUI。

迁移步骤

  1. 遵循官方 Tailwind v4 升级指南 https://tailwindcss.com/docs/upgrade-guide
  2. 升级 HeroUI 版本
  1. 使用新的 Tailwind v4 语法配置 HeroUI

更新 CSS 引入

不使用 tailwind.config.js

由于 Tailwind v4 更倾向于 CSS‑first 方法，tailwind.config.js 将不再需要。

创建 hero.ts 文件以导出 heroui 插件。

按如下方式更新您的主 CSS 文件

使用 tailwind.config.js

在 Tailwind v4，tailwind.config.js 仍然支持后向兼容。如果您仍然需要使用它，可以显式加载。

更新 PostCSS 配置

  • tailwindcss 在 v3 是 PostCSS 插件，现在属于 @tailwindcss/postcss 包。
  • autoprefixer 已不再需要，前缀自动处理。

更新 Vite 配置（仅限 Vite 项目）

验证

迁移后请验证：

  1. 样式是否正确应用
  2. 构建过程是否无错误
  3. HeroUI 组件是否按预期渲染

请确保查看 Tailwind v4 文档，了解可能影响您现有样式的任何破坏性更改。

需要帮助？

如在迁移过程中遇到任何问题，请：

表单 FormsNextUI 到 HeroUI 迁移