173 lines
3.8 KiB
Markdown
173 lines
3.8 KiB
Markdown
# HeroUI 配置修复说明
|
||
|
||
## ✅ 问题已解决
|
||
|
||
原先使用 Tailwind CSS 4 导致样式无法正常加载，已降级到 Tailwind CSS 3.4.17，现在 HeroUI 可以正常工作了。
|
||
|
||
## 🔧 修复步骤
|
||
|
||
### 1. 降级 Tailwind CSS
|
||
```bash
|
||
npm uninstall @tailwindcss/postcss
|
||
npm install -D tailwindcss@^3.4.17 postcss autoprefixer --legacy-peer-deps
|
||
```
|
||
|
||
### 2. 恢复 PostCSS 配置
|
||
```js
|
||
// postcss.config.mjs
|
||
const config = {
|
||
plugins: {
|
||
tailwindcss: {}, // ✅ 使用 tailwindcss
|
||
autoprefixer: {},
|
||
},
|
||
};
|
||
```
|
||
|
||
### 3. 重新安装 HeroUI
|
||
```bash
|
||
npm install @heroui/react @heroui/theme framer-motion --legacy-peer-deps
|
||
```
|
||
|
||
## 📦 当前依赖版本
|
||
|
||
```json
|
||
{
|
||
"dependencies": {
|
||
"@heroui/react": "^2.8.7",
|
||
"@heroui/theme": "^2.4.25",
|
||
"framer-motion": "latest"
|
||
},
|
||
"devDependencies": {
|
||
"tailwindcss": "^3.4.17",
|
||
"postcss": "^8.4.49",
|
||
"autoprefixer": "^10.4.20"
|
||
}
|
||
}
|
||
```
|
||
|
||
## ✅ 验证 HeroUI 工作正常
|
||
|
||
访问 http://localhost:3002，你应该看到：
|
||
|
||
1. ✅ HeroUI Navbar 组件正常渲染
|
||
2. ✅ 所有样式正常加载
|
||
3. ✅ 按钮有正确的 hover 效果
|
||
4. ✅ Dropdown 菜单正常工作
|
||
5. ✅ 暗色模式正常切换
|
||
|
||
## 🎨 检查样式是否生效
|
||
|
||
打开浏览器开发者工具，检查 Navbar 元素：
|
||
|
||
```html
|
||
<nav class="flex z-40 w-full h-auto items-center justify-center...">
|
||
<!-- ✅ HeroUI 类名已生成 -->
|
||
</nav>
|
||
```
|
||
|
||
如果看到类似上面的类名，说明 HeroUI 工作正常。
|
||
|
||
## ⚠️ 注意事项
|
||
|
||
### 为什么不用 Tailwind CSS 4？
|
||
|
||
1. **配置方式完全改变** - Tailwind CSS 4 不再使用 `tailwind.config.ts`
|
||
2. **HeroUI 兼容性** - HeroUI 虽然声明支持 4.0+，但实际测试发现样式无法正常加载
|
||
3. **生态系统未就绪** - 很多插件还未完全支持 v4
|
||
|
||
### 使用 --legacy-peer-deps 的原因
|
||
|
||
HeroUI 的 `peerDependencies` 声明了 `tailwindcss@>=4.0.0`，但实际上在 v3 下工作得更好。使用 `--legacy-peer-deps` 可以绕过版本检查。
|
||
|
||
## 📁 配置文件
|
||
|
||
### tailwind.config.ts ✅
|
||
```typescript
|
||
import type { Config } from "tailwindcss";
|
||
import { heroui } from "@heroui/theme";
|
||
|
||
export default {
|
||
darkMode: "class",
|
||
content: [
|
||
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
|
||
"./components/**/*.{js,ts,jsx,tsx,mdx}",
|
||
"./app/**/*.{js,ts,jsx,tsx,mdx}",
|
||
"./node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}", // ⬅️ 重要
|
||
],
|
||
theme: {
|
||
extend: {
|
||
// 你的自定义主题
|
||
},
|
||
},
|
||
plugins: [heroui()], // ⬅️ 重要
|
||
} satisfies Config;
|
||
```
|
||
|
||
### postcss.config.mjs ✅
|
||
```javascript
|
||
const config = {
|
||
plugins: {
|
||
tailwindcss: {},
|
||
autoprefixer: {},
|
||
},
|
||
};
|
||
|
||
export default config;
|
||
```
|
||
|
||
### components/Providers.tsx ✅
|
||
```typescript
|
||
'use client';
|
||
|
||
import { HeroUIProvider } from '@heroui/react';
|
||
// ...
|
||
|
||
export default function Providers({ children }: { children: ReactNode }) {
|
||
return (
|
||
<HeroUIProvider>
|
||
{/* 其他 Provider */}
|
||
{children}
|
||
</HeroUIProvider>
|
||
);
|
||
}
|
||
```
|
||
|
||
## 🚀 现在可以使用 HeroUI 了！
|
||
|
||
所有配置已完成，HeroUI 组件可以正常工作。
|
||
|
||
### 使用示例
|
||
|
||
```tsx
|
||
import { Button, Navbar, NavbarBrand, NavbarContent, NavbarItem } from '@heroui/react';
|
||
|
||
export default function MyNavbar() {
|
||
return (
|
||
<Navbar>
|
||
<NavbarBrand>
|
||
<p className="font-bold">ACME</p>
|
||
</NavbarBrand>
|
||
<NavbarContent>
|
||
<NavbarItem>
|
||
<Button color="primary">Get Started</Button>
|
||
</NavbarItem>
|
||
</NavbarContent>
|
||
</Navbar>
|
||
);
|
||
}
|
||
```
|
||
|
||
## 📚 相关文档
|
||
|
||
- [HeroUI 官方文档](https://heroui.com/docs)
|
||
- [Tailwind CSS 3.x 文档](https://v3.tailwindcss.com)
|
||
- [查看完整使用指南](./HEROUI-GUIDE.md)
|
||
|
||
## 🎉 完成
|
||
|
||
✅ HeroUI 已成功配置并可以正常使用！
|
||
✅ Navbar 已重构为使用 HeroUI 组件！
|
||
✅ 所有样式正常加载！
|
||
|
||
现在你可以开始使用 HeroUI 的所有组件了！
|