安装和配置 Astro。

更新： 我们在 canary 版本中已添加对 React 19 和 Tailwind v4 的完整支持。有关更多信息，请参见 Tailwind v4 文档。

创建项目

首先，创建一个新的 Astro 项目：

pnpm npmyarn bun

  1. pnpm create astro@latest

配置你的 Astro 项目

系统会询问你几个问题来配置项目：

  1. - 我们应该在哪儿创建你的新项目？ ./your-app-name
  2. - 你希望如何开始你的新项目？ 选择一个模板
  3. - 你计划使用 TypeScript 吗？ 是
  4. - TypeScript 的严格性如何？ 严格
  5. - 安装依赖项？ 是
  6. - 初始化一个新的 git 仓库？（可选）是/否

将 React 添加到项目中

使用 Astro CLI 安装 React：

pnpm npmyarn bun

  1. pnpm dlx astro add react

在安装 React 时，CLI 会提示一些问题，回答 “是” 即可。

将 Tailwind CSS 添加到项目中

pnpm npmyarn bun

  1. pnpm dlx astro add tailwind

在 src 文件夹中创建 styles/globals.css 文件

styles/globals.css

  1. @tailwind base;
  2. @tailwind components;
  3. @tailwind utilities;

导入 globals.css 文件

在 src/pages/index.astro 文件中导入 styles/globals.css 文件：

src/pages/index.astro

  1. ---
  2. import '@/styles/globals.css'
  3. ---

更新 astro.config.mjs 并将 applyBaseStyles 设置为 false

为了防止重复应用 Tailwind 的基础样式，我们需要告诉 Astro 不要再应用基础样式，因为我们已经在自己的 globals.css 文件中包含了这些样式。为此，在 astro.config.mjs 中为 Tailwind 插件设置 applyBaseStyles 配置项为 false。

astro.config.mjs

  1. export default defineConfig({
  2.   integrations: [
  3.     tailwind({
  4.       applyBaseStyles: false,
  5.     }),
  6.   ],
  7. })

编辑 tsconfig.json 文件

将以下代码添加到 tsconfig.json 文件中，以解析路径：

tsconfig.json

  1. {
  2.   "compilerOptions": {
  3.     // ...
  4.     "baseUrl": ".",
  5.     "paths": {
  6.       "@/*": [
  7.         "./src/*"
  8.       ]
  9.     }
  10.     // ...
  11.   }
  12. }

运行 CLI

运行 shadcn 的初始化命令来设置项目：

pnpm npmyarn bun

  1. pnpm dlx shadcn@latest init

就这些

现在，你可以开始将组件添加到项目中。

pnpm npmyarn bun

  1. pnpm dlx shadcn@latest add button

上面的命令会将 Button 组件添加到你的项目中。然后，你可以像这样导入它：

  1. ---
  2. import { Button } from "@/components/ui/button"
  3. ---
  5. <html lang="en">
  6.     <head>
  7.         <title>Astro</title>
  8.     </head>
  9.     <body>
  10.         <Button>Hello World</Button>
  11.     </body>
  12. </html>