core/Projektarbeit-MYP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Projektarbeit-MYP/backend/docs/TAILWIND_SETUP.md
Till Tomczak df8fb197c0 📝 Commit Details:
2025-05-31 22:40:29 +02:00

6.1 KiB
Raw Blame History

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:

npx tailwindcss -i ./static/css/input.css -o ./static/css/tailwind.min.css --minify

Dark Mode CSS

Um das Dark-Mode CSS zu erstellen:

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:

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

    npm install

  2. CSS überwachen und automatisch neu generieren:

    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:

    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 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:

<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:

@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:

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

npm install

Problem: Tailwind-Befehle funktionieren nicht

Verwenden Sie npx vor dem Befehl:

npx tailwindcss -i ./static/css/input.css -o ./static/css/tailwind-dark-consolidated.min.css --minify

Ressourcen