@trapar-waves/react-tailwind

August 20, 2025 · View on GitHub

npm version npm dm License GitHub last commit GitHub Actions Workflow Status Renovate

English | 中文 | 日本語

Современный шаблон разработки пользовательского интерфейса, интегрирующий React и Tailwind CSS, с поддержкой Rsbuild, TypeScript, ESLint (конфигурация Antfu) и Iconify.

✨ Особенности

  • Современный UI-фреймворк: Строится с использованием React (v19) для компонентно-ориентированного декларативного интерфейса.
  • Стилизация с упором на утилиты: Использует Tailwind CSS v4 (tailwindcss) вместе с @tailwindcss/postcss, обеспечивая гибкую и быструю стилизацию при сохранении согласованности.
  • Быстрый рабочий процесс разработки: Использует Rsbuild (@rsbuild/core и @rsbuild/plugin-react) для оптимизированных сборок и эффективной производительности сервера разработки.
  • Поддержка иконок: Включает @iconify/json и @iconify/tailwind4 для масштабируемой и настраиваемой иконографии.
  • Типовая безопасность: Использует TypeScript (v5.9.x) для повышения надежности кода и обеспечения надежной проверки типов во время разработки.
  • Фокус на качестве кода: Включает ESLint с @antfu/eslint-config для линтинга и обеспечения лучших практик в кодовой базе.
  • Git Hooks: Интеграция husky и lint-staged для предварительных проверок коммитов.

💻 Технологический стек

  • Фреймворк/Библиотека: React (v19)
  • Стилизация: Tailwind CSS (tailwindcss)
  • Инструмент сборки: Rsbuild (@rsbuild/core)
  • Язык: TypeScript (v5.9.x)
  • Обработка CSS: PostCSS with @tailwindcss/postcss
  • Линтинг: ESLint с @antfu/eslint-config
  • Иконки: Iconify (@iconify/json, @iconify/tailwind4)

Полный список зависимостей см. в package.json.

🚀 Начало работы

Следуйте этим инструкциям, чтобы запустить проект локально.

Предварительные требования

Убедитесь, что у вас установлены следующие компоненты:

  • Node.js (рекомендуется версия >= 18.x)
  • Пакетный менеджер (npm, yarn или pnpm)
node -v
npm -v

Установка

  1. Создайте новый проект с помощью шаблона:

    pnpm create trapar-waves

  2. Перейдите в каталог вашего проекта и установите зависимости:

    pnpm install
# or
npm install
# or
yarn install

  3. Запустите сервер разработки:

    pnpm dev

🧱 Структура проекта

├── public/           # Статические ресурсы
├── src/              # Исходный код
│   ├── App.css       # Глобальные стили и импорт Tailwind
│   ├── App.tsx       # Основной компонент приложения
│   └── index.tsx     # Точка входа
├── rsbuild.config.ts # Конфигурация Rsbuild
├── tsconfig.json     # Конфигурация TypeScript
├── eslint.config.js  # Конфигурация ESLint
└── package.json      # Зависимости и скрипты проекта

🤝 Участие в разработке

Вклад в проект приветствуется и очень ценится! Чтобы внести вклад, следуйте этим шагам:

  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