create-zigg-layout
v0.0.4
Published
Template ini merupakan boilerplate untuk proyek frontend menggunakan Svelte dengan Vite sebagai bundler, serta TailwindCSS yang dikombinasikan dengan DaisyUI sebagai UI framework.
Downloads
5
Readme
Frontend Template: Svelte + Vite + TailwindCSS + DaisyUI
🚀 Pengenalan
Template ini merupakan boilerplate untuk proyek frontend menggunakan Svelte dengan Vite sebagai bundler, serta TailwindCSS yang dikombinasikan dengan DaisyUI sebagai UI framework. Dengan template ini, kamu bisa langsung mulai membangun aplikasi web dengan performa tinggi dan tampilan modern.
🛠️ Fitur Utama
⚡️ Super Cepat dengan Vite sebagai bundler.
🎨 TailwindCSS untuk styling yang fleksibel.
🌸 DaisyUI sebagai UI components berbasis Tailwind.
🧩 Svelte untuk framework frontend yang reaktif dan ringan.
📦 Modular dan Mudah Digunakan.
📌 Instalasi
Pastikan kamu sudah menginstal Node.js di sistem kamu.
Clone repository ini
npx degit username/template-svelte my-project
Masuk ke direktori proyek
cd my-project
Instal dependensi
npm install
🚀 Menjalankan Proyek
Untuk menjalankan proyek dalam mode development:
npm run dev
Lalu buka http://localhost:5173/ di browser.
Jika ingin menjalankan dengan host jaringan lokal:
npm run dev -- --host
📦 Build untuk Produksi
Gunakan perintah berikut untuk membundle proyek:
npm run build
Hasil build akan berada di dalam folder dist/.
Untuk melihat hasil build secara lokal:
npm run preview
🎨 Konfigurasi TailwindCSS dan DaisyUI
Konfigurasi TailwindCSS dan DaisyUI ada di file tailwind.config.js:
module.exports = {
content: ["./src/**/*.{html,js,svelte,ts}"],
theme: {
extend: {},
},
plugins: [require("daisyui")],
daisyui: {
themes: ["light", "dark"],
},
};
Kamu bisa mengganti tema default dengan mengedit bagian daisyui.themes.
🔧 Struktur Proyek
my-project/
├── src/
│ ├── routes/
│ ├── components/
│ ├── App.svelte
│ ├── main.js
│ └── assets/
├── public/
├── package.json
├── tailwind.config.js
├── vite.config.js
└── README.md
📚 Dokumentasi Tambahan
Svelte: https://svelte.dev/docs
Vite: https://vitejs.dev/guide/
TailwindCSS: https://tailwindcss.com/docs
DaisyUI: https://daisyui.com/docs/
🎯 Lisensi
Proyek ini menggunakan lisensi MIT.