Neu Tailwind als Basis für JTL Shop 6 ?

[karabey]

Hey zusammen,

Bootstrap 4 ist mittlerweile schon von 2018 – also über 7 Jahre alt.
Im Web-Frontend hat sich seitdem einiges getan, und Frameworks wie Tailwind CSS (https://tailwindcss.com) sind heute viel moderner, schlanker und flexibler.

Kurz gesagt:

• Schneller: Lädt nur das, was wirklich gebraucht wird → schnellere Seiten.
• Flexibler: Keine starren Vorgaben, alles frei gestaltbar.
• Einfacher: Änderungen direkt im HTML, kein zusätzliches CSS nötig.
• Modern: Aktuelle Webstandards, perfekt für Mobile & Desktop.

Ich finde, das wäre eine richtig gute Basis für zukünftige Shop-Versionen.
Was meint ihr dazu? Sieht euch Tailwind mal selbst an https://tailwindcss.com

 

[NoOne]

Nur weil NOVA Bootstrap benutzt, heißt das nicht, dass du das auch benutzen musst. Du musst halt nur dafür sorgen, dass Tailwind verfügbar ist. Dürfte kein Problem sein, ein Template zu entwickeln, das Tailwind nutzt. Vor allem dann nicht, wenn du statisch kompilierte CSS Dateien verwendest (also per Tailwind CLI).
Shop 6 wird vermutlich eher in Richtung headless laufen. Also wirst du da dann ggf. eh nutzen können, was du möchtest.

Im Moment ists Smarty als Template-Engine. Da kannst du eigentlich als CSS einbinden, was du möchtest. Im Zweifel musst du halt ein Plugin mitliefern, das Tailwind kompilieren kann, wenn die User Änderungen vornehmen können sollen. Dafür musst du freilich auch ein eigenes Template entwickeln, was nicht auf NOVA basiert, damit du die Klassen gemäß der Tailwind-Philosophie nutzen kannst. Oder eben die Klassen in NOVA anpassen.

Im übrigen ist Bootstrap nicht unbedingt weniger flexibel. Beides schließlich "nur" CSS. Tailwind geht nur den Ansatz eher HTML unübersichtlicher zu machen und Bootstrap geht eher den Ansatz die CSS-Dateien unübersichtlicher zu machen.
Tailwind 'lädt' auch nicht nur das, was wirklich gebraucht wird. Es wirft nur alles aus der schlussendlichen CSS-Datei raus, was nie gebraucht wird. Ansonsten wird auch bei Tailwind für jede Seite alles an CSS geladen, was für das Projekt gebraucht wird, auch das, was für die spezifische Seite nicht gebraucht wird. Das kann man mit Bootstrap auch machen. Muss man halt nur manuell tun.

 

[martinwolf]

Nur weil NOVA Bootstrap benutzt, heißt das nicht, dass du das auch benutzen musst. Du musst halt nur dafür sorgen, dass Tailwind verfügbar ist. Dürfte kein Problem sein, ein Template zu entwickeln, das Tailwind nutzt. Vor allem dann nicht, wenn du statisch kompilierte CSS Dateien verwendest (also per Tailwind CLI).

Spätestens wenn es um das Thema Plugins geht bist du dann nicht mehr Kompatibel, wenn das Template kein Bootstrap einbindet und die Plugins auf dieses Framework setzen.

Die große Frage, die sich mir stellt ist, welchen Vorteil erhofft ihr euch durch einen Wechsel?

✅ Vorteile (Warum viele Teams Tailwind lieben)​

• Schnelle Entwicklung / Prototyping
  Utility-Klassen erlauben sehr schnelles Styling direkt im HTML — ideal für Prototypen und UI-Iterationen.
• Konsistenz durch Design-System
  tailwind.config.js zentralisiert Farben, Abstände, Breakpoints und macht das Design konsistent.
• Hohe Flexibilität
  Kombinieren von Utilities erlaubt feingranulares Styling ohne viele neue CSS-Regeln.
• Responsive- und State-Variants out-of-the-box
  md:, lg:, hover:, focus: etc. — keine extra Media-Queries mehr im CSS schreiben.
• Große Community & Ökosystem
  Viele Beispiele, Komponentenbibliotheken, UI-Kits und Tutorials.

⚠️ Nachteile / Fallstricke​

• Viele Klassen im HTML
  HTML kann sehr „klassig“ und unübersichtlich wirken (lange class-Attribute). Das stört manche Entwickler/Designer.
• Semantik vs. Utility
  Man schreibt Styling direkt in Markup statt semantische Klassen (z. B. btn-primary), was bei manchen Teams auf Ablehnung stößt.
• Lernkurve & Mental-Shift
  Utility-first erfordert anderes Denken als BEM/Component-CSS. Anfangs ungewohnt.
• Komplexe Styles können unübersichtlich werden
  Für sehr komplexe, zustandsabhängige oder dynamische Styles können Utilities schwer zu lesen sein.
• Potential für Inline-Duplikation
  Wenn du Utilities nicht in Komponenten oder @apply bündelst, wiederholt sich Styling oft.
• Debugging von CSS-Problemen
  Fehlersuche kann anders sein — statt component.css suchst du in einer Kombination von Utilities.
• Zugänglichkeit bleibt Entwickler-Aufgabe
  Tailwind hilft nicht automatisch bei ARIA/semantischem HTML — das musst du weiterhin sicherstellen.