文档
Astro
Astro
为 Astro 安装和配置 shadcn/ui
注意: 以下指南适用于 Tailwind v4。如果您正在使用 Tailwind v3,请使用 shadcn@2.3.0
。
创建项目
首先创建一个新的 Astro 项目
pnpm create astro@latest astro-app --template with-tailwindcss --install --add react --git
编辑 tsconfig.json 文件
将以下代码添加到 tsconfig.json
文件以解析路径
tsconfig.json
{
"compilerOptions": {
// ...
"baseUrl": ".",
"paths": {
"@/*": [
"./src/*"
]
}
// ...
}
}
运行 CLI
运行 shadcn
init 命令来设置您的项目
pnpm dlx shadcn@latest init
添加组件
您现在可以开始向您的项目添加组件了。
pnpm dlx shadcn@latest add button
上面的命令会将 Button
组件添加到您的项目。然后您可以像这样导入它
src/pages/index.astro
---
import { Button } from "@/components/ui/button"
---
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<title>Astro + TailwindCSS</title>
</head>
<body>
<div class="grid place-items-center h-screen content-center">
<Button>Button</Button>
</div>
</body>
</html>