创建项目
首先创建一个新的 Astro 项目
配置您的 Astro 项目
您将被问及几个问题来配置您的项目
- Where should we create your new project? ./your-app-name
- How would you like to start your new project? Choose a template
- Do you plan to write TypeScript? Yes
- How strict should TypeScript be? Strict
- Install dependencies? Yes
- Initialize a new git repository? (optional) Yes/No
将 React 添加到您的项目
使用 Astro CLI 安装 React
在安装 React 时,对 CLI 提示的所有问题回答 Yes
。
将 Tailwind CSS 添加到您的项目
在 src
文件夹中创建 styles/globals.css
文件。
@tailwind base;
@tailwind components;
@tailwind utilities;
导入 globals.css
文件
在 src/pages/index.astro
文件中导入 styles/globals.css
文件
---
import '@/styles/globals.css'
---
更新 astro.config.mjs
并将 applyBaseStyles
设置为 false
为了避免重复提供 Tailwind 基础样式,我们需要告诉 Astro 不要应用基础样式,因为我们已经在自己的 globals.css
文件中包含了它们。为此,请将 astro.config.mjs
中 Tailwind 插件的 applyBaseStyles
配置选项设置为 false
。
export default defineConfig({
integrations: [
tailwind({
applyBaseStyles: false,
}),
],
});
编辑 tsconfig.json 文件
将以下代码添加到 tsconfig.json
文件以解析路径
{
"compilerOptions": {
// ...
"baseUrl": ".",
"paths": {
"@/*": [
"./src/*"
]
}
// ...
}
}
运行 CLI
运行 shadcn
init 命令来设置您的项目
就是这样
您现在可以开始向项目添加组件了。
以上命令会将 Button
组件添加到您的项目中。您可以像这样导入它:
---
import { Button } from "@/components/ui/button"
---
<html lang="en">
<head>
<title>Astro</title>
</head>
<body>
<Button>Hello World</Button>
</body>
</html>