211 lines
6.1 KiB
Markdown
211 lines
6.1 KiB
Markdown
# 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) |