# 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 `<head>` der Seite eingebunden:

```html
<link href="{{ url_for('static', filename='css/tailwind.min.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/tailwind-dark.min.css') }}" rel="stylesheet">
```

## 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 `<html>`-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
<html class="light" data-theme="light">
<!-- oder für Dark Mode: -->
<html class="dark" data-theme="dark">
```

In Tailwind-Klassen verwenden Sie das `dark:` Präfix:

```html
<div class="bg-white text-gray-800 dark:bg-gray-800 dark:text-white">
  Dieser Text passt sich dem Theme an
</div>
```

## 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) 