@trapar-waves/react-tailwind/readme/README-CN.md

A modern UI development template integrating React and Tailwind CSS, with Rsbuild, TypeScript, ESLint (Antfu config), and Iconify support.

# @trapar-waves/react-tailwind

![npm version](https://img.shields.io/npm/v/@trapar-waves/react-tailwind)
![npm dm](https://img.shields.io/npm/dm/@trapar-waves/react-tailwind)
![License](https://img.shields.io/github/license/Trapar-waves/react-tailwind)
![GitHub last commit](https://img.shields.io/github/last-commit/Trapar-waves/react-tailwind)
![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/Trapar-waves/react-tailwind/release.yml)
![Renovate](https://img.shields.io/badge/renovate-enabled-blue)

---

[English](../README.md) | [日本語](/readme/README-JP.md) | [Русский язык](/readme/README-RU.md)

> 一个结合React、Mantine UI和Tailwind CSS的项目，用于构建现代Web应用。

## ✨ 特性

- **现代UI框架:** 使用React (v19)构建组件驱动的声明式界面。
- **丰富的组件库:** 与Mantine UI（`@mantine/core`和`@mantine/hooks`）集成，提供预构建的UI元素和实用钩子。
- **实用优先的样式:** 采用Tailwind CSS和`@tailwindcss/postcss`，实现灵活快速的样式设计，同时保持一致性。
- **PostCSS集成:** 利用PostCSS插件如`postcss-import`、`autoprefixer`和`postcss-simple-vars`进行高级CSS处理。
- **类型安全:** 使用TypeScript (v5.8.x)增强代码可靠性，并在开发过程中提供强大的类型检查。
- **快速开发工作流:** 使用Rsbuild（`@rsbuild/core`和`@rsbuild/plugin-react`）实现优化构建和高效开发服务器性能。
- **图标支持:** 包含`@iconify/json`和`@iconify/tailwind`，提供可扩展和可定制的图标。
- **一致的设计语言:** 结合`postcss-preset-mantine`和`tailwind-preset-mantine`，实现Mantine和Tailwind样式的无缝集成。
- **注重代码质量:** 包含ESLint和`@antfu/eslint-config`，用于代码 linting 和执行最佳实践。

## 💻 技术栈

- **框架/库:** React (v19)
- **UI工具包/样式:** Mantine UI（`@mantine/core`），Tailwind CSS（`tailwindcss`）
- **构建工具:** Rsbuild（`@rsbuild/core`）
- **语言:** TypeScript (v5.8.x)
- **CSS处理:** PostCSS与插件如`autoprefixer`和`postcss-simple-vars`
- **代码检查:** ESLint与`@antfu/eslint-config`
- **状态管理:** Zustand
- **路由:** Tanstack Router
- **数据获取:** Tanstack Query (React Query)
- **表格组件:** Tanstack Table

完整依赖列表参见[package.json](package.json)。

## 🚀 开始使用

按照以下说明在本地运行项目。

### 前提条件

确保已安装以下软件：

- Node.js (推荐 >= 18.x 版本)
- 包管理器 (npm, yarn 或 pnpm)

```bash
node -v
npm -v
```

### 安装步骤

运行脚本

```bash
pnpm create trapar-waves
```

安装依赖

```bash
npm install
yarn install
pnpm install
```

## 🤝 贡献指南

欢迎贡献，非常感谢您的支持！请按照以下步骤进行贡献：

1. Fork 本仓库
2. 创建功能分支（`git checkout -b feature/amazing-feature`）
3. 提交您的更改（`git commit -m 'Add some amazing feature'`）
4. 推送到分支（`git push origin feature/amazing-feature`）
5. 打开Pull Request

## 👤 Author

- **Rikka:** (admin@rikka.cc)
- **GitHub Profile:** [Muromi-Rikka](https://github.com/Muromi-Rikka)

## 🔗 Links

- **仓库:** [https://github.com/Trapar-waves/react-tailwind](https://github.com/Trapar-waves/react-tailwind)
- **主页:** [https://github.com/Trapar-waves/react-tailwind](https://github.com/Trapar-waves/react-tailwind)
- **问题:** [https://github.com/Trapar-waves/react-tailwind/issues](https://github.com/Trapar-waves/react-tailwind/issues)