@trapar-waves/vue-tailwind

@trapar-waves/vue-tailwind

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

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

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

• 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

• Framework: Vue 3
• Styling: Tailwind CSS v4
• State Management: VueUse
• Build Tool: Rsbuild
• Language: TypeScript
• Linting: ESLint with Antfu's Config
• Icons: Iconify with Tailwind plugin

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

• Email: admin@rikka.cc
• GitHub: Muromi-Rikka

📄 License

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

🔗 Links

• Repository: https://github.com/Trapar-waves/vue-tailwind
• Homepage: https://github.com/Trapar-waves/vue-tailwind
• Issues: https://github.com/Trapar-waves/vue-tailwind/issues