https://github.com/martinille/starter-template-vite-vue3-sass-tailwind4-daisyui5
Start your Vue3 project with pre-configured Sass, TailwindCSS 4 and DaisyUI 5 implementation.
https://github.com/martinille/starter-template-vite-vue3-sass-tailwind4-daisyui5
daisyui daisyui-v5 starter-kit starter-template tailwind-css-template tailwindcss tailwindcss-v4 vue-template
Last synced: about 2 months ago
JSON representation
Start your Vue3 project with pre-configured Sass, TailwindCSS 4 and DaisyUI 5 implementation.
- Host: GitHub
- URL: https://github.com/martinille/starter-template-vite-vue3-sass-tailwind4-daisyui5
- Owner: martinille
- License: mit
- Created: 2025-03-02T05:13:15.000Z (3 months ago)
- Default Branch: master
- Last Pushed: 2025-03-10T16:32:05.000Z (3 months ago)
- Last Synced: 2025-03-28T04:35:01.314Z (2 months ago)
- Topics: daisyui, daisyui-v5, starter-kit, starter-template, tailwind-css-template, tailwindcss, tailwindcss-v4, vue-template
- Language: Vue
- Homepage: https://tpl-vue3-tailwind4-daisyui5.brown.sk/
- Size: 271 KB
- Stars: 14
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- fucking-awesome-vite - vite-vue3-tailwind4-daisyui5-starter-template - Starter template with Vue 3 + Vite + Tailwind CSS 4 + DaisyUI 5 + Sass. (Get Started / Templates)
- awesome-vite - vite-vue3-tailwind4-daisyui5-starter-template - Starter template with Vue 3 + Vite + Tailwind CSS 4 + DaisyUI 5 + Sass. (Get Started / Templates)
README
# Template: Vite + Vue 3 + Sass + Tailwind 4 + DaisyUI 5
This template should help get you started developing with Vue 3 in Vite. The template is based on the [Vite + Vue 3 template](https://vite.new/vue), but with some additional features:
- ✅ [Vite](https://vite.dev/) for the build tool
- ✅ [Vue 3](https://vuejs.org/) for the frontend
- ✅ [Vue Router 4](https://router.vuejs.org/) for routing
- ✅ [Sass](https://sass-lang.com/) for styling
- ✅ [Tailwind CSS 4](https://tailwindcss.com/) for styling
- ✅ [DaisyUI 5](https://daisyui.com/) for additional Tailwind CSS components
- ✅ [PostCSS](https://postcss.org/) for transforming CSS with JS plugins
- ✅ **Theme configuration** (light, dark, ...)
- ✅ **UI blocks (components)** pre-configured with DaisyUI
### Demo
- 🌐 [https://tpl-vue3-tailwind4-daisyui5.brown.sk/](https://tpl-vue3-tailwind4-daisyui5.brown.sk/)
### Template initialization by forking (recommended) 🍴
⏩ Use github's template feature to create a new repository based on this template:
→ [Create a repository from this template](https://github.com/new?template_name=starter-template-vite-vue3-sass-tailwind4-daisyui5&template_owner=martinille) ←
### Template initialization by cloning
⏩ Clone the repository:
```bash
git clone https://github.com/martinille/starter-template-vite-vue3-sass-tailwind4-daisyui5.git
```
⏩ Change the directory:
```bash
cd
```
⏩ Remove the `.git` directory:
```bash
rm -rf .git
```
⏩ Install the dependencies:
```bash
npm install
```
### Development
- ⏩ Run the Vite development server with HMR: `npm run dev`
### Production
- ⏩ Build the project: `npm run build`
### Folder structure
- 📁 `public/` - Static files
- 📁 `src/` - Source files
- 📁 `assets/` - Static assets
- 📁 `images/` - Images
- 📁 `styles/` - Styles
- 📁 `vendor/` - Vendor styles (Tailwind CSS, DaisyUI)
- 📁 `components/` - Vue components
- 📁 `router/` - Vue Router configuration
- 📁 `views/` - Vue views
- 📄 `App.vue` - Root component
- 📄 `main.js` - Entry point
### GitHub Pages
The template includes a GitHub workflow for deployment to GitHub Pages. To enable GitHub Pages:
1. Visit your repository's Settings
2. Select the Pages section
3. In the "Build and deployment" area, set the source to "GitHub Actions"
### TODO
- [ ] 🕘 Add unit tests
- [ ] 🕘 Minimal template (no additional features)