Tailwindcss

[paddibr]

Hi,

hat von euch schonmal jmd. das tailwindcss Framework eingebunden? Falls ja, wie sehen eure Configs aus?

Laut Docs lässt sich das ja unter Symfony so einrichten: https://tailwindcss.com/docs/guides/symfony

[zonky]

Richard ist da fit

[paddibr]

d.h., dass man das unter Contao hinbekommt?

[zonky]

denke schon... Frag ihn https://github.com/richardhj

[paddibr]

bekomme leider keine Rückmeldung Hat das sonst noch keiner versucht? Tailwind ist doch eigentlich schon recht bekannt.

[paddibr]

hat das mittlerweile schon jmd. in Contao genutzt/integriert?

[mlweb]

Vielleicht Moritz (@mvo), der ist von Tailwind begeistert. Ich denke aber mit den neuen Twig-Templates und der Funktion (attrs) sollte das leichter zu realisieren sein, als noch in älteren Contao-Versionen.

[zoglo]

Laut Docs lässt sich das ja unter Symfony so einrichten: https://tailwindcss.com/docs/guides/symfony

Wenn Tailwind nicht in der Lage ist,
die dynamisch generierten Templates auf Serverseite zu lesen, um das CSS zu generieren, kann es nicht für den Zweck verwendet werden, für den es eigentlich entwickelt wurde:
https://tailwindcss.com/docs/install...c%20CSS%20file.

Tailwind CSS funktioniert, indem es alle HTML-Dateien, JavaScript-Komponenten und andere Vorlagen nach Klassennamen durchsucht, die entsprechenden Styles generiert und sie dann in eine statische CSS-Datei schreibt.

Die Tailwind-Generierung funktioniert in Symfony-Applikationen, in denen die Templates inklusive der Klassen bereits eingelesen werden können, also in deiner Entwicklungsumgebung.
In einem CMS, in dem die Klassen auf Server-Seite ohne Watcher eingefügt werden? Nein.

Du kannst stattdessen eine statische, vorkompilierte Tailwind-CSS einbinden, hast dann jedoch natürlich einen höheren Overhead (einfach einen Blindenstock in die Hand nehmen und PageSpeed Insights ignorieren). Zwischen Version 1 bis 3 waren es 2.2 -2.4 MB unkomprimiert: https://v1.tailwindcss.com/docs/controlling-file-size.

Was ich damit sagen möchte:
(Du brauchst also keine Konfiguration in einem System, in dem es noch nicht funktioniert,) da du dir dieses CSS entweder komplett als eigenständiges Element herunterladen kannst -> https://tailwindcss.com/blog/standalone-cli
oder es über das play-cdn auch generieren lassen kannst (DSGVO? - frage deinen Anwalt) / Danach -> https://tailwindcss.com/docs/installation/play-cdn.

Es sei denn, du möchtest wirklich nur statisches CSS verwenden, dann folge trotzdem den oben genannten Anleitungen.

Disclaimer und andere Frameworks:

Ich verfolge die meisten CSS-Frameworks, und alle haben ihre Vor- und Nachteile.

• Tailwind in JS-Applikationen mit React
• Bootstrap auch möglich
• Materialize, Semantic UI und Foundation -> viel Spaß dabei, alle Vorlagen anzupassen (gilt für jedes Framework)
• Du kannst auch https://vanillaframework.io/ überprüfen, wenn du bereits dabei bist, die Contao-Templates für alles anzupassen. Geschrieben von https://github.com/canonical-web-and-design.

Tailwind CSS mit seinen 2+ Megabyte in der kompletten Variante? Nein. Andere Frameworks? Ja

Ich liebe jedes der genannten Frameworks; es lässt sich leider nicht ganz einfach updatesicher mit wenig Arbeitsaufwand in Contao integrieren (Contao Bootstrap inbegriffen ;D - Das auf Version 5.3 zu aktualisieren, würde wieder mal länger dauern)