---
title: "Astro"
description: "在你的 Astro 项目中安装并配置 Tiptap UI 组件。"
canonical_url: "https://tiptap.zhcndoc.com/ui-components/install/astro"
---

# Astro

在你的 Astro 项目中安装并配置 Tiptap UI 组件。

使用以下命令用 TypeScript 脚手架一个新的 Astro 项目。

```bash
npx create-astro@latest astro-app  --template with-tailwindcss --install --add react --git
```

## 编辑 tsconfig.json 文件

向 `tsconfig.json` 文件添加以下代码以解析路径：

```json
{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}
```

## 添加 Tiptap 组件

使用 CLI 安装 Tiptap UI 组件。例如，要添加 `HeadingButton` 组件：

```bash
npx @tiptap/cli@latest add heading-button
```

上述命令将安装 `HeadingButton` 组件及其依赖。然后，你可以在你的 **Tiptap** 项目中导入并使用它：

```tsx
import React from 'react'
import { HeadingButton } from '@/components/ui/heading-button'

export default function EditorPage() {
  // Tiptap 设置...

  return (
    <div className="editor-page">
      <div className="toolbar">
        <HeadingButton level={1}>标题 1</HeadingButton>
        <HeadingButton level={2}>标题 2</HeadingButton>
        <HeadingButton level={3}>标题 3</HeadingButton>
      </div>
      {/* 你的编辑器组件 */}
    </div>
  )
}
```

## 添加样式

> **样式会自动添加:**
>
> 当你安装第一个 Tiptap UI 组件时，CLI 会自动将所需的 .scss 导入添加到你的主样式表中。在大多数情况下，**无需手动设置**。

在继续之前，请确保你的项目包含了 CSS 重置样式。
如果你正在使用 Tailwind CSS，则已经包含了。

#### 样式导入位置

CLI 会自动将样式导入注入到你的全局样式表中，例如：

- `styles/global.css`

**文件：** `styles/global.css`（根据你的项目而定）

```css
@import '<path-to-styles>/_variables.scss';
@import '<path-to-styles>/_keyframe-animations.scss';
```

了解更多关于配置样式的信息，请查阅[样式设置指南](https://tiptap.zhcndoc.com/ui-components/getting-started/style.md)。