# @trapar-waves/vue-tailwind

[![npm version](https://img.shields.io/npm/v/@trapar-waves/vue-tailwind)](https://www.npmjs.com/package/@trapar-waves/vue-tailwind)
[![npm downloads](https://img.shields.io/npm/dm/@trapar-waves/vue-tailwind)](https://www.npmjs.com/package/@trapar-waves/vue-tailwind)
[![License](https://img.shields.io/github/license/Trapar-waves/vue-tailwind)](https://github.com/Trapar-waves/vue-tailwind/blob/main/LICENSE)
[![Last commit](https://img.shields.io/github/last-commit/Trapar-waves/vue-tailwind)](https://github.com/Trapar-waves/vue-tailwind/commits/main)
[![CI Status](https://img.shields.io/github/actions/workflow/status/Trapar-waves/vue-tailwind/release.yml?label=CI)](https://github.com/Trapar-waves/vue-tailwind/actions/workflows/release.yml)
[![Renovate](https://img.shields.io/badge/renovate-enabled-blue)](https://renovatebot.com/)

[English](../README.md) | [中文](/readme/README-CN.md) | [Русский язык](/readme/README-RU.md)

> 迅速なフロントエンド開発のためのVue 3プロジェクトテンプレートで、Tailwind CSSと現代的な開発ツールが統合されています。

## ✨ 特徴

- **Vue 3**: Vueの最新機能を活用してユーザーインターフェースを構築。
- **Tailwind CSS v4**: ユーティリティファーストのCSSフレームワークによる迅速なUI開発。
- **TypeScript**: 強力な型付けでコード品質と開発者体験を向上。
- **Rsbuild**: 現代的なWeb開発のための高速で効率的なビルドツール。
- **@vueuse/core**: 基本的なVueコンポジションユーティリティのコレクション。
- **Iconify 統合**: Tailwind CSSでIconifyアイコンを簡単に使用。
- **ESLint & Antfu 設定**: コードスタイルとベストプラクティスの強制。
- **PostCSS**: 最適なTailwind統合のための`@tailwindcss/postcss`を使用。

## 💻 技術スタック

- **フレームワーク**: [Vue 3](https://v3.vuejs.org/)
- **スタイリング**: [Tailwind CSS v4](https://tailwindcss.com/)
- **状態管理**: [VueUse](https://vueuse.org/)
- **ビルドツール**: [Rsbuild](https://rsbuild.dev/)
- **言語**: [TypeScript](https://www.typescriptlang.org/)
- **リンティング**: [ESLint](https://eslint.org/) と [Antfu's Config](https://github.com/antfu/eslint-config)
- **アイコン**: [Iconify](https://iconify.design/) と [Tailwind プラグイン](https://docs.iconify.design/)

依存関係の完全なリストは [package.json](./package.json) を参照してください。

## 🚀 クイックスタート

### 前提条件

- Node.js (>= 18.x 推奨)
- パッケージマネージャー (npm, yarn, または pnpm)

```bash
node -v
npm -v # または yarn -v / pnpm -v
```

### プロジェクトの作成

テンプレートを使用して新しいプロジェクトを作成:

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

### 依存関係のインストール

プロジェクトディレクトリに移動して依存関係をインストール:

```bash
# npm を使用
npm install

# yarn を使用
yarn install

# pnpm を使用
pnpm install
```

### 開発

開発サーバーを起動:

```bash
# npm を使用
npm run dev

# yarn を使用
yarn dev

# pnpm を使用
pnpm dev
```

### ビルド

プロダクションビルドを作成:

```bash
# npm を使用
npm run build

# yarn を使用
yarn build

# pnpm を使用
pnpm build
```

### プレビュー

ローカルでプロダクションビルドをプレビュー:

```bash
# npm を使用
npm run preview

# yarn を使用
yarn preview

# pnpm を使用
pnpm preview
```

## 🧪 リンティング

ESLintでコードをチェック:

```bash
# npm を使用
npm run lint

# yarn を使用
yarn lint

# pnpm を使用
pnpm lint
```

## 🤝 コントリビュート

貢献は歓迎です！以下の方法で参加できます:

1. リポジトリをフォーク
2. 機能ブランチを作成 (`git checkout -b feature/amazing-feature`)
3. 変更をコミット (`git commit -m 'Add some amazing feature'`)
4. ブランチにプッシュ (`git push origin feature/amazing-feature`)
5. プルリクエストを開く

コードがプロジェクトのスタイルガイドに従い、すべてのテストに通過することを確認してください。

## 👤 作者

**Rikka**

- メール: [admin@rikka.cc](mailto:admin@rikka.cc)
- GitHub: [Muromi-Rikka](https://github.com/Muromi-Rikka)

## 📄 ライセンス

このプロジェクトはMITライセンスの下でライセンスされています - 詳細は [LICENSE](./LICENSE) ファイルを参照してください。

## 🔗 リンク

- **リポジトリ**: [https://github.com/Trapar-waves/vue-tailwind](https://github.com/Trapar-waves/vue-tailwind)
- **ホームページ**: [https://github.com/Trapar-waves/vue-tailwind](https://github.com/Trapar-waves/vue-tailwind)
- **イシュー**: [https://github.com/Trapar-waves/vue-tailwind/issues](https://github.com/Trapar-waves/vue-tailwind/issues)