# @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/)

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

> A Vue 3 project template with Tailwind CSS and modern development tools for rapid frontend development.

## ✨ Features

- **Vue 3**: Leverage the latest features of Vue for building user interfaces.
- **Tailwind CSS v4**: Utility-first CSS framework for rapid UI development.
- **TypeScript**: Strong typing for better code quality and developer experience.
- **Rsbuild**: Fast and efficient build tool for modern web development.
- **@vueuse/core**: Collection of essential Vue composition utilities.
- **Iconify Integration**: Easily use icons from Iconify with Tailwind CSS.
- **ESLint & Antfu Config**: Enforce code style and best practices.
- **PostCSS**: Process CSS with `@tailwindcss/postcss` for optimal Tailwind integration.

## GitHub Pages

Pushing a version tag matching `v*` runs [`.github/workflows/pages.yml`](./.github/workflows/pages.yml), which builds with `BASE_PATH=/<repository-name>/`, copies `dist/index.html` to `dist/404.html` for SPA routing, and deploys to GitHub Pages. In the repository **Settings → Pages**, set **Source** to **GitHub Actions** once.

```bash
BASE_PATH=/vue-tailwind/ pnpm run build && pnpm preview
```

PowerShell:

```powershell
$env:BASE_PATH="/vue-tailwind/"; pnpm run build; pnpm preview
```

## 💻 Tech Stack

- **Framework**: [Vue 3](https://v3.vuejs.org/)
- **Styling**: [Tailwind CSS v4](https://tailwindcss.com/)
- **State Management**: [VueUse](https://vueuse.org/)
- **Build Tool**: [Rsbuild](https://rsbuild.dev/)
- **Language**: [TypeScript](https://www.typescriptlang.org/)
- **Linting**: [ESLint](https://eslint.org/) with [Antfu's Config](https://github.com/antfu/eslint-config)
- **Icons**: [Iconify](https://iconify.design/) with [Tailwind plugin](https://docs.iconify.design/)

See [package.json](./package.json) for a complete list of dependencies.

## 🚀 Quick Start

### Prerequisites

- Node.js (>= 18.x recommended)
- Package manager (npm, yarn, or pnpm)

```bash
node -v
npm -v # or yarn -v / pnpm -v
```

### Create Project

Create a new project using the template:

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

### Install Dependencies

Navigate to your project directory and install dependencies:

```bash
# Using npm
npm install

# Using yarn
yarn install

# Using pnpm
pnpm install
```

### Development

Start the development server:

```bash
# Using npm
npm run dev

# Using yarn
yarn dev

# Using pnpm
pnpm dev
```

### Build

Create a production build:

```bash
# Using npm
npm run build

# Using yarn
yarn build

# Using pnpm
pnpm build
```

### Preview

Locally preview the production build:

```bash
# Using npm
npm run preview

# Using yarn
yarn preview

# Using pnpm
pnpm preview
```

## 🧪 Linting

Lint your code with ESLint:

```bash
# Using npm
npm run lint

# Using yarn
yarn lint

# Using pnpm
pnpm lint
```

## 🤝 Contributing

Contributions are welcome! Here's how you can contribute:

1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request

Please ensure your code adheres to the project's style guidelines and passes all tests.

## 👤 Author

**Rikka**

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

## 📄 License

This project is licensed under the MIT License - see the [LICENSE](./LICENSE) file for details.

## 🔗 Links

- **Repository**: [https://github.com/Trapar-waves/vue-tailwind](https://github.com/Trapar-waves/vue-tailwind)
- **Homepage**: [https://github.com/Trapar-waves/vue-tailwind](https://github.com/Trapar-waves/vue-tailwind)
- **Issues**: [https://github.com/Trapar-waves/vue-tailwind/issues](https://github.com/Trapar-waves/vue-tailwind/issues)