Dieses Repository enthält ein kleines Starter‑Template für eine Webanwendung mit:
- Svelte (UI‑Framework)
- Vite (Dev Server & Build)
- Tailwind CSS (v4.1.14) über das offizielle PostCSS‑Plugin
Ziel: schneller Entwicklungs-Workflow mit HMR und einem einfachen Produktions‑Build.
Voraussetzungen
- Node.js v18+ (empfohlen: v20)
- npm
Schnellstart (PowerShell)
- Abhängigkeiten installieren
npm install- Dev-Server mit HMR starten
npm run devÖffne danach http://localhost:5173 im Browser.
- Produktions-Build
npm run build- Build lokal ansehen (Preview)
npm run previewTailwind / CSS
- Tailwind ist in Version 4.1.14 installiert und wird über
postcss.config.cjsmit@tailwindcss/postcssin den Vite‑Build integriert. Es ist keine separate Tailwind‑CLI mehr nötig. - Die Tailwind‑Eingabedatei ist
src/styles/tailwind.css.
CI
- Es gibt einen GitHub Actions Workflow unter
.github/workflows/ci.yml, der bei Push/PR aufmainnpm ciundnpm run buildausführt.
Projektstruktur (wichtigste Dateien)
index.html– HTML‑Entry (bindet das Svelte‑App‑Mountpoint)src/main.js– Svelte Einstiegsrc/App.svelte– Beispielkomponentesrc/styles/tailwind.css– Tailwind Entrytailwind.config.cjs– Tailwind Konfigurationpostcss.config.cjs– PostCSS Konfigurationvite.config.mjs– Vite Konfiguration
Fehlerbehebung / Hinweise
- Wenn der Dev-Server nicht startet: prüfe, ob Port 5173 frei ist oder starte mit
--hostfür Netzwerkzugriff. - Bei Problemen mit der Browserslist‑Warnung:
npx update-browserslist-db@latestausführen.
Weiteres
- Wenn du ein Deployment (GitHub Pages / Netlify / Vercel) möchtest, kann ich eine Actions‑ oder Deploy‑Konfiguration hinzufügen.
Viel Erfolg beim Entwickeln — sag Bescheid, wenn ich zusätzlich Deployment oder CI‑Erweiterungen anlegen soll.