@trapar-waves/vue-tailwind

April 27, 2026 · View on GitHub

npm version npm downloads License Last commit CI Status Renovate

中文 | 日本語 | Русский язык

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, 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.

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

PowerShell:

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

💻 Tech Stack

See package.json for a complete list of dependencies.

🚀 Quick Start

Prerequisites

  • Node.js (>= 18.x recommended)
  • Package manager (npm, yarn, or pnpm)
node -v
npm -v # or yarn -v / pnpm -v

Create Project

Create a new project using the template:

pnpm create trapar-waves

Install Dependencies

Navigate to your project directory and install dependencies:

# Using npm
npm install

# Using yarn
yarn install

# Using pnpm
pnpm install

Development

Start the development server:

# Using npm
npm run dev

# Using yarn
yarn dev

# Using pnpm
pnpm dev

Build

Create a production build:

# Using npm
npm run build

# Using yarn
yarn build

# Using pnpm
pnpm build

Preview

Locally preview the production build:

# Using npm
npm run preview

# Using yarn
yarn preview

# Using pnpm
pnpm preview

🧪 Linting

Lint your code with ESLint:

# 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

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.