# Tailwind CSS Konfiguration für MYP Platform
Dieses Dokument beschreibt die aktuelle Tailwind CSS Konfiguration und Build-Prozesse für die MYP Platform.
## Struktur
Die CSS-Assets des Projekts sind wie folgt strukturiert:
```
static/
css/
input.css # Tailwind Direktiven & benutzerdefinierte Styles
components.css # Wiederverwendbare UI-Komponenten
tailwind.min.css # Kompiliertes Light-Mode CSS (minimiert)
tailwind-dark.min.css # Kompiliertes Dark-Mode CSS (minimiert)
```
## Tailwind Konfiguration
Die Konfiguration wird durch die Datei `tailwind.config.js` im Hauptverzeichnis des Projekts definiert. Diese enthält:
- Farbpalette mit Mercedes-Benz Farben
- Erweiterungen für Schriften, Schatten und Animation
- Dark-Mode-Konfiguration über die Klasse `dark`
## Build-Befehle
### Light Mode CSS (Standardtheme)
Um das Standard-Light-Mode CSS zu erstellen:
```bash
npx tailwindcss -i ./static/css/input.css -o ./static/css/tailwind.min.css --minify
```
### Dark Mode CSS
Um das Dark-Mode CSS zu erstellen:
```bash
npx tailwindcss -i ./static/css/input.css -o ./static/css/tailwind-dark.min.css --minify --dark-mode 'class'
```
## Verwendung im Projekt
Beide CSS-Dateien werden im `` der Seite eingebunden:
```html
```
## Dark Mode Funktionalität
Der Dark Mode wird durch JavaScript in `ui-components.js` gesteuert, welches:
1. Benutzereinstellungen in `localStorage` speichert
2. Systemeinstellungen beobachtet (via `prefers-color-scheme`)
3. Eine `dark`-Klasse zum ``-Element hinzufügt/entfernt
4. Ein Tastaturkürzel (Strg+Shift+D) zum Umschalten bereitstellt
## Entwicklung
Bei der Entwicklung neuer Komponenten:
1. Füge Tailwind-Klassen direkt zu HTML-Elementen hinzu
2. Für wiederverwendbare Komponenten, nutze die `@apply`-Direktive in `components.css`
3. Nach Änderungen müssen beide CSS-Dateien neu gebaut werden
## Voraussetzungen
- Node.js und npm müssen installiert sein
- Python 3.11 und Flask müssen installiert sein
## Projektstruktur
Die Tailwind-Integration besteht aus folgenden Komponenten:
```
app/
├─ static/
│ ├─ css/
│ │ ├─ input.css # Quelldatei für Tailwind
│ │ ├─ tailwind-dark-consolidated.min.css # Generierte CSS-Datei
├─ templates/ # HTML-Templates mit Tailwind-Klassen
├─ package.json # NPM-Konfiguration
├─ tailwind.config.js # Tailwind-Konfiguration
├─ postcss.config.js # PostCSS-Konfiguration
```
## Einrichtung
Das Projekt verwendet Tailwind CSS für das Frontend-Styling. Die Einrichtung wurde bereits abgeschlossen und umfasst:
1. **NPM-Abhängigkeiten** in der `package.json`
2. **Tailwind-Konfiguration** in `tailwind.config.js`
3. **PostCSS-Konfiguration** in `postcss.config.js`
4. **CSS-Eingabedatei** in `static/css/input.css`
5. **Generierte CSS-Datei** in `static/css/tailwind-dark-consolidated.min.css`
## Verwendung im Entwicklungsprozess
### CSS-Generierung
Um an den Styles zu arbeiten, verwenden Sie die folgenden Befehle:
1. **Abhängigkeiten installieren** (falls noch nicht geschehen):
```bash
npm install
```
2. **CSS überwachen und automatisch neu generieren**:
```bash
npm run watch:css
```
Dieser Befehl startet einen Watcher, der Änderungen an HTML-Templates und der input.css überwacht und automatisch die CSS-Datei neu generiert.
3. **CSS für Produktion erstellen**:
```bash
npm run build:css
```
Dieser Befehl erstellt eine minifizierte CSS-Datei für den Produktionseinsatz.
### Workflow
Der empfohlene Workflow für die Arbeit mit Tailwind CSS ist:
1. Starten Sie den Watcher mit `npm run watch:css`
2. Bearbeiten Sie die Template-Dateien in `templates/` oder fügen Sie eigene Komponenten in `static/css/input.css` hinzu
3. Die Änderungen werden automatisch in die generierte CSS-Datei übernommen
4. Führen Sie den Flask-Server mit `python3.11 app.py` aus, um die Änderungen zu sehen
## Dark Mode
Die Anwendung unterstützt einen Dark Mode. In den Templates wird dies folgendermaßen implementiert:
```html
```
In Tailwind-Klassen verwenden Sie das `dark:` Präfix:
```html
Dieser Text passt sich dem Theme an
```
## Anpassungen
### Eigene Komponenten hinzufügen
Um eigene Komponenten zu definieren, verwenden Sie das `@layer components` Konstrukt in der `static/css/input.css` Datei:
```css
@layer components {
.custom-button {
@apply bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700;
}
}
```
### Tailwind-Konfiguration anpassen
Die Tailwind-Konfiguration wird in der `tailwind.config.js` Datei vorgenommen. Hier können Sie:
- Farben anpassen
- Eigene Abstände definieren
- Schriftarten konfigurieren
- Plugins hinzufügen
- Theme-Einstellungen vornehmen
## Optimierung für Produktion
Für die Produktionsumgebung sollte die CSS-Datei optimiert werden:
```bash
npm run build:css
```
Dies erstellt eine minifizierte Version der CSS-Datei mit PurgeCSS, das ungenutzte CSS-Klassen entfernt.
## Fehlerbehebung
### Problem: CSS wird nicht aktualisiert
1. Stellen Sie sicher, dass der Watcher läuft (`npm run watch:css`)
2. Überprüfen Sie, ob Ihre Änderungen in einem Pfad sind, der in `tailwind.config.js` unter `content` definiert ist
3. Leeren Sie den Browser-Cache (`Ctrl+F5`)
### Problem: Node-Module nicht gefunden
```bash
npm install
```
### Problem: Tailwind-Befehle funktionieren nicht
Verwenden Sie `npx` vor dem Befehl:
```bash
npx tailwindcss -i ./static/css/input.css -o ./static/css/tailwind-dark-consolidated.min.css --minify
```
## Ressourcen
- [Offizielle Tailwind-Dokumentation](https://tailwindcss.com/docs)
- [Tailwind mit Flask einrichten](https://testdriven.io/blog/flask-htmx-tailwind/)
- [Dark Mode mit Tailwind CSS](https://tailwindcss.com/docs/dark-mode)