Tailwind React UI

一个现代化的 React UI 组件库，基于 React 和 TailwindCSS 构建。

安装

npm install @yuqi_dev/tailwind-react-ui
# 或者
yarn add @yuqi_dev/tailwind-react-ui
# 或者
pnpm add @yuqi_dev/tailwind-react-ui

配置

TailwindCSS 配置

本组件库依赖于 TailwindCSS，请确保你的项目中已正确配置 TailwindCSS。如果还没有配置，请按照以下步骤操作：

1. 安装 TailwindCSS 及其依赖：

npm install -D tailwindcss postcss autoprefixer

2. 创建 TailwindCSS 配置文件：

npx tailwindcss init -p

3. 在你的 CSS 文件中导入 TailwindCSS：

@tailwind base;
@tailwind components;
@tailwind utilities;

使用

按需导入

组件库支持按需导入，你可以只导入需要使用的组件：

import { Button } from 'tailwind-react-ui';

function App() {
  return (
    <Button variant="primary" size="medium">
      点击我
    </Button>
  );
}

组件示例

Button 按钮

import { Button } from 'tailwind-react-ui';

// 基础用法
<Button>默认按钮</Button>

// 不同变体
<Button variant="primary">主要按钮</Button>
<Button variant="secondary">次要按钮</Button>
<Button variant="outline">描边按钮</Button>

// 不同尺寸
<Button size="small">小按钮</Button>
<Button size="medium">中按钮</Button>
<Button size="large">大按钮</Button>

// 加载状态
<Button loading>加载中</Button>

// 禁用状态
<Button disabled>禁用按钮</Button>

API

Button

| 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | variant | 按钮变体类型 | 'primary' | 'secondary' | 'outline' | 'primary' | | size | 按钮尺寸 | 'small' | 'medium' | 'large' | 'medium' | | loading | 加载状态 | boolean | false | | disabled | 禁用状态 | boolean | false | | className | 自定义类名 | string | - |

开发

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 运行测试
npm test

# 构建
npm run build

发布

# 登录到 npm
npm login

# 发布包
npm publish

许可证

MIT