入门指南

了解如何安装和开始使用 Resolid React UI。

按照以下步骤快速开始使用组件库。

安装

通过以下任一方式安装 Resolid React UI 组件包：

## NPM
npm install @resolid/react-ui
## PNPM
pnpm add @resolid/react-ui
## Yarn
yarn add @resolid/react-ui

通过以下任一方式将 Resolid React UI TailwindCSS 预设作为开发依赖项安装：

## NPM
npm install -D @resolid/tailwind
## PNPM
pnpm add -D @resolid/tailwind
## Yarn
yarn add -D @resolid/tailwind

添加 TailwindCSS 预设

确保您已经安装了 TailwindCSS ，然后在 tailwind.config.js 文件内：

在 content 数组中添加 Resolid Mix UI 路径，以便将类应用于组件。
要求 Tailwind CSS 的预设。

import resolidTailwind from "@resolid/tailwind";

export default {
  presets: [resolidTailwind.preset()],
  content: ["./node_modules/@resolid/react-ui/dist/*.{js,cjs}", "./src/**/*.{html,js,jsx,ts,tsx,mdx}"]
};

添加 ResolidProvider

必须在应用程序的 root 处添加 ResolidProvider 。

// 1. 导入 `ResolidProvider`
import { ResolidProvider } from "@resolid/react-ui";

function Root() {
  // 2. 使用 ResolidProvider 包裹你的 App
  return (
    <ResolidProvider>
      <YourApp />
    </ResolidProvider>
  );
}

使用组件

导入您需要的组件并开始构建应用程序。

import { Button } from "@resolid/react-ui";

function YourApp() {
  return (
    <Button>你好</Button>
  );
}