@trapar-waves/react-mantine-tailwind
August 20, 2025 · View on GitHub
English | 中文 | Русский язык
React、Mantine UI、Tailwind CSSを組み合わせた現代的なWebアプリケーション構築用プロジェクトです。
✨ 特徴
- モダンUIフレームワーク: コンポーネント駆動の宣言型インターフェースのためにReact (v19)を使用して構築されています。
- 充実したコンポーネントライブラリ: Mantine UI（
@mantine/coreと@mantine/hooks）を統合し、事前構築されたUI要素とユーティリティフックを提供します。 - ユーティリティファーストスタイリング: Tailwind CSSと
@tailwindcss/postcssを採用し、一貫性を維持しながら柔軟で迅速なスタイリングを可能にします。 - PostCSS統合:
postcss-import、autoprefixer、postcss-simple-varsなどのPostCSSプラグインを活用し、高度なCSS処理を実現します。 - 型安全性: TypeScript (v5.9.x)を使用してコードの信頼性を向上させ、開発中の堅牢な型チェックを提供します。
- 高速開発ワークフロー: Rsbuild（
@rsbuild/coreと@rsbuild/plugin-react）を使用して最適化されたビルドと効率的な開発サーバーパフォーマンスを実現します。 - アイコンサポート:
@iconify/jsonと@iconify/tailwindを含み、スケーラブルでカスタマイズ可能なアイコンを提供します。 - 一貫したデザイン言語:
postcss-preset-mantineとtailwind-preset-mantineを組み合わせて、MantineとTailwindスタイルのシームレスな統合を実現します。 - コード品質への注力: ESLintと
@antfu/eslint-configを含み、コードベースのリンティングとベストプラクティスの適用を実現します。 - Git Hooks: Huskyと
lint-stagedを統合し、コミット時の自動コード品質チェックを実現します。 - 自動リリース: GitHub Actionsを使用して自動リリースと変更履歴の生成を実現します。
💻 技術スタック
- フレームワーク/ライブラリ: React (v19)
- UIツールキット/スタイリング: Mantine UI（
@mantine/core）、Tailwind CSS（tailwindcss） - ビルドツール: Rsbuild（
@rsbuild/core） - 言語: TypeScript (v5.9.x)
- CSS処理:
autoprefixerやpostcss-simple-varsなどのプラグインを備えたPostCSS - リンティング:
@antfu/eslint-configを備えたESLint - 状態管理: Zustand
- ルーティング: Tanstack Router
- データフェッチング: Tanstack Query (React Query)
- テーブルコンポーネント: Tanstack Table
依存関係の完全なリストについてはpackage.jsonを参照してください。
🚀 始め方
以下の手順に従ってプロジェクトをローカルで実行してください。
前提条件
以下がインストールされていることを確認してください：
- Node.js (推奨バージョン >= 18.x)
- パッケージマネージャー (npm, yarn または pnpm)
node -v
npm -v
インストール
スクリプトの実行
pnpm create trapar-waves
依存関係のインストール
npm install
yarn install
pnpm install
開発
開発サーバーの起動:
npm run dev
yarn dev
pnpm dev
ビルド
本番用にプロジェクトをビルド:
npm run build
yarn build
pnpm build
プレビュー
ローカルで本番ビルドをプレビュー:
npm run preview
yarn preview
pnpm preview
リンティング
コードベースのリント:
npm run lint
yarn lint
pnpm lint
🤝 コントリビューション
貢献は歓迎され、非常に高く評価されています！貢献するには以下の手順に従ってください：
- リポジトリをフォークする
- 機能ブランチを作成する（
git checkout -b feature/amazing-feature） - 変更をコミットする（
git commit -m 'Add some amazing feature'） - ブランチにプッシュする（
git push origin feature/amazing-feature） - Pull Requestを開く
プルリクエストを提出する前に、コードがプロジェクトのリントルールに準拠し、すべてのチェックに合格することを確認してください。
📄 ライセンス
このプロジェクトはMITライセンスの下でライセンスされています。詳細についてはLICENSEファイルを参照してください。
👤 Author
- Rikka: (admin@rikka.cc)
- GitHub Profile: Muromi-Rikka