@trapar-waves/react-tailwind
Version:
A modern UI development template integrating React and Tailwind CSS, with Rsbuild, TypeScript, ESLint (Antfu config), and Iconify support.
95 lines (67 loc) • 5.58 kB
Markdown
# @trapar-waves/react-tailwind
---
[English](../README.md) | [中文](/readme/README-CN.md) | [日本語](/readme/README-JP.md)
> Проект, сочетающий React, Mantine UI и Tailwind CSS для создания современных веб-приложений.
## ✨ Особенности
- **Современный 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` для линтинга и обеспечения лучших практик в кодовой базе.
## 💻 Технологический стек
- **Фреймворк/Библиотека:** 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. Сделайте форк репозитория
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)