Template-Projekt im Projektverzeichnis anlegen
npm create vite@latest my-mini-app --template react-ts
Pakatabhängigkeiten prüfen und abhängige Pakete installieren
npm install
Lokalen Testserver starten
npm run dev
Deployment-Preview starten
npm run preview
Paketabhängigkeiten prüfen
npm audit
Paketabhängigkeiten fixen
npm audit fix --force
Projekt in den Ordner /dist ausgeben/compilieren
npm run build
Projekt-Cache zurücksetzen
npm cache clean –force
React-Router installieren
npm install react-router-dom npm install --save-dev @types/react-router-dom
Tailwind 4 installieren
Tailwind CSS v4 arbeitet komplett anders als Tailwind 3 – ohne tailwind.config.js. Stattdessen wird alles direkt in CSS konfiguriert.
npx tailwindcss init -p npm install -D postcss
Datei: postcss.config.js anpassen
export default {
plugins: {
'@tailwindcss/postcss': {},
},
}
Datei vite.config.ts editieren:
import { defineConfig } from 'vite'
import react, { reactCompilerPreset } from '@vitejs/plugin-react'
import babel from '@rolldown/plugin-babel'
export default defineConfig({
plugins: [
react(),
babel({ presets: [reactCompilerPreset()] })
// tailwindcss() - ENTFERNT!
],
})
Datei /src/index.css editieren:
@import "tailwindcss";