https://github.com/coderkearns/alpine-tailwind-vite-template
A Vite + Tailwind CSS + Alpine.js starter template for new GitHub projects.
https://github.com/coderkearns/alpine-tailwind-vite-template
Last synced: 18 days ago
JSON representation
A Vite + Tailwind CSS + Alpine.js starter template for new GitHub projects.
- Host: GitHub
- URL: https://github.com/coderkearns/alpine-tailwind-vite-template
- Owner: coderkearns
- License: mit
- Created: 2026-04-27T20:16:20.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2026-04-27T20:25:36.000Z (3 months ago)
- Last Synced: 2026-04-27T22:17:04.464Z (3 months ago)
- Language: HTML
- Homepage: https://coderkearns.github.io/alpine-tailwind-vite-template/
- Size: 39.1 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Alpine Tailwind Vite Template
> A lightweight, opinionated starter for building fast frontends with **Vite**, **Tailwind CSS**, and **Alpine.js**.
[](https://opensource.org/licenses/MIT)
[](https://vitejs.dev)
[](https://tailwindcss.com)
[](https://alpinejs.dev)
## 🚀 Quick Start
### 1. Use this template
Click the **Use this template** button on GitHub to create a new repository from this starter.
### 2. Clone & install
```bash
git clone https://github.com/yourusername/your-repo.git
cd your-repo
npm install
```
### 3. Develop locally
```bash
npm run dev
```
Opens on `http://localhost:5173` with hot reload enabled.
### 4. Build & deploy
```bash
# Build for production
npm run build
# Deploy to GitHub Pages
npm run deploy
```
Then in your GitHub repository **Settings** → **Pages**, set the source to the `gh-pages` branch.
---
## ✨ Features
- **Vite** for lightning-fast development and optimized production builds
- **Tailwind CSS v4** with semantic theme tokens and first-class color utilities
- **Alpine.js** for lightweight, focused UI interactions without framework overhead
- **GitHub Pages ready** with `gh-pages` deployment built-in
- **Clean separation**: HTML templates in `.html`, component logic in `.js`, styling in `.css`
- **Sensible defaults** for Git, accessibility, and responsive design
- **No CI or tests** — keep it simple, add complexity as needed
---
## 📁 Project structure
```
├── index.html # Main entry point with app markup
├── src/
│ ├── main.js # Alpine.js components and logic
│ └── styles/
│ └── main.css # Tailwind, base styles, theme tokens, components
├── vite.config.js # Vite configuration
├── package.json # Dependencies and scripts
└── README.md # This file
```
---
## 🎨 Customization
### Update the counter component
Edit the markup in [`index.html`](./index.html) and the logic in [`src/main.js`](./src/main.js).
### Theme tokens & design system
Adjust color, typography, and spacing in [`src/styles/main.css`](./src/styles/main.css) using Tailwind's `@theme` directive:
```css
@theme inline {
--color-primary: #0f172a;
--color-background: #f8fafc;
/* ... */
}
```
Then use them as semantic utilities:
```html
Click me
```
---
## 🔧 Available scripts
| Command | Purpose |
|---------|---------|
| `npm run dev` | Start dev server with hot reload |
| `npm run build` | Build production bundle to `dist/` |
| `npm run preview` | Preview production build locally |
| `npm run deploy` | Build and publish to GitHub Pages |
---
## 📄 License
MIT — see [LICENSE](./LICENSE) for details.
---
## 🎯 Next steps
1. Delete or modify the example counter in `index.html` and `src/main.js`
2. Update the site title, description, and metadata
3. Add your brand colors and tokens to `src/styles/main.css`
4. Build your app, then deploy with `npm run deploy`
**Happy building!** 🎉