import { Tabs, Tab, Cards, Card,Callout } from 'nextra/components'

# 快速开始

## 特性

- 纯 CSS 组件，通用且轻量
- **0** 运行时，所有工作在编译时完成
- 可结合 `tailwindcss` 使用，所写即所得
- 可扩展 包括但不限于，主题，颜色，类型，尺寸，形状... 所有一切都可以自定义

## 安装 `@icestack/ui`

{/* prettier-ignore-start */}
<Tabs items={['pnpm', 'npm', 'yarn', 'bun']}>
  <Tab>
```bash 
pnpm install -D @icestack/ui @icestack/tailwindcss
```
</Tab>
  <Tab>
```bash
npm install -D @icestack/ui @icestack/tailwindcss
```
</Tab>
  <Tab>
```bash 
yarn add -D @icestack/ui @icestack/tailwindcss
```
</Tab>
  <Tab>
```bash 
bun add -D @icestack/ui @icestack/tailwindcss
```
</Tab>
</Tabs>

{/* prettier-ignore-end */}
`@icestack/ui` 将会被下载并安装在你的本地，同时一个命令 `icestack` 将会被注册

## 初始化配置文件

安装好 `@icestack/ui` 之后，执行:

```bash
npx icestack init --mode preset
```

这个命令会在当前执行目录下生成一个 `icestack.config.cjs` 文件，默认内容如下:

```js filename="icestack.config.cjs"
/**
 * @type {import('@icestack/ui').Config}
 */
const config = {
  outdir: './my-ui'
}

module.exports = config
```

### 构建样式

你可以在 `config` 中，配置你自己的样式和选项，完成之后执行:

```bash
npx icestack build
```

<Callout type="info">
你可以把 `icestack build` 注册到你的 `package.json` 中:
```json
{
   "scripts": {
    "build:ui": "icestack build"
  },
}
```
</Callout>

这个命令会在当前配置文件下的 `'./my-ui'` 目录构建出产物，接下来你就可以直接导入这些 `css`,`js` 文件，不过把它们交给 `tailwindcss` 进行使用也是个不错的选择。

## 作为 tailwindcss plugin 来使用

### 配置

在 `tailwind.config.js` 中注册 `icestackPlugin` 插件，并传一个 `loadDirectory` 参数来定位刚刚产物的生成的位置:

```js filename="tailwind.config.js"
const path = require('node:path')
const { icestackPlugin } = require('@icestack/tailwindcss')

/** @type {import('tailwindcss').Config} */
module.exports = {
  // ...
  plugins: [
    icestackPlugin({
      // 加载目录的绝对路径
      loadDirectory: path.resolve(__dirname, 'my-ui'),
      // 是否注入 tailwindcss theme config
      // 为 true 时，生成器的 primary success warning 这些颜色会进入 tailwindcss.theme.extend 配置
      // 你才能够使用 bg-primary / text-success
      // 默认值: false
      loadConfig: true
      // ...
    })
  ]
}
```

接着只要我们正常运行项目，就直接能够使用 `my-ui` 目录下，所有的 `CSS` 组件了！

<Callout type="info">
你可以直接在这里，找到预设的 [所有组件列表](/components/overview)，并直接复制 `html`

假如你的 `class` 命名与预设方案有冲突，可以设置 [`postcss.prefix`](/config/postcss#postcssprefix) 来添加前缀，以此来避免冲突。
</Callout>

