Warum und wie nutzen wir das Tailwind CSS
Bei 1xINTERNET nutzen wir Tailwind CSS als unser Standard-CSS-Framework. Tailwind CSS eignet sich hervorragend im Zusammenspiel von Drupal, Symfony, Twig sowie mit ReactJS und Webkomponenten. Wir zeigen, wie wir die optimale Abstimmung zwischen diesen Technologien erreichen und geben Praxisbeispiele für die Codierung.
Was ist Tailwind CSS?
Tailwind ist ein CSS-Framework, ein Design-Tool, das die Entwicklungsgeschwindigkeit erhöht und die Konsistenz der Benutzeroberfläche verbessert.
Im Gegensatz zu vielen anderen UI-Frameworks, die ihre Komponenten nur in einem bestimmten Stil bereitstellen, bietet Tailwind CSS Low-Level-Utility-Klassen, die individuell angepasst und erweitert werden können. So können Kundenbedürfnisse und die kreativen Ideen des Designers besser umgesetzt werden.
Es ermöglicht mehr Flexibilität und Kontrolle und eine einheitliche Umsetzung.
Mit Tailwind CSS können wir den Designprozess jeder Webseite oder Anwendung standardisieren, wodurch die Entwicklung schneller und die Benutzeroberfläche konsistenter wird.
Warum Tailwind CSS?
Tailwind CSS ist ein flexibles und effizientes Instrument. Durch die Möglichkeit, bestehende Designs anzupassen und sie anschließend immer wiederzuverwenden, sparen wir wertvolle Zeit und verringern repetitiven Aufwand. Zudem unterstützt es ein einheitliches Erscheinungsbild und responsives Design.
Utility First Ansatz
Tailwind ist ein Utility-First-CSS-Framework. Das bedeutet, dass es sich darauf konzentriert, den Styling-Prozess schneller und verständlicher zu machen.
Tailwind greift nicht auf vordefinierte Stile oder Komponenten zurück, sondern bietet eine Reihe von Utility-Klassen mit aussagekräftigen Namen. Diese können individuell angepasst und erweitert werden, um die Elemente der Benutzeroberfläche zu personalisieren.
Der Sinn der Utility-Klassen ist es, verständlich und charakteristisch zu sein. Auch bei der Benennung. Anstatt neue Namen für die Klassen zu erfinden, wird einfach die Anwendung in den Namen integriert.
Auf diese Weise können Entwickler schnell auf die Komponenten zugreifen und Details mit den Designern abstimmen. Designer können kreativer sein und gleichzeitig konsistente Designprinzipien etablieren.
Im Ergebnis kommt der Entwickler schneller zum Ziel und der Kunde erhält früher ein personalisiertes und charakteristisches Erscheinungsbild.
Beispiele aus der Praxis:
bg-white // bg means background and “white” is the colour p-3 // p means padding m-3 // m means margin and “3” the amount applied
Zudem lassen sich die Utility-Klassen abhängig vom Bildschirmmodus, vom Gerät des Nutzers oder der Bewegung des Mauszeigers (schwebend, fokussierend ...) anwenden.
Zum Beispiel:
dark:bg-black // dark: will only apply when on dark mode sm:p-3 // sm: will only apply for mobile screensize hover:text-red // hover: will only apply when hovering
Mit Tailwind können wir Utility-Klassen verwenden, die unsere Styling-Methode verständlicher, agiler, konsistenter, kreativer und aussagekräftiger machen.
Definiertes Designsystem
Die Datei der Tailwind-Konfiguration bildet die Grundlage für Styling und Thematisierung.
Tailwind bietet vordefinierte Stile an. Diese können individuell angepasst oder beispielsweise um Farben, Abstände, Animationen usw. erweitert werden.
Dadurch ist die gesamte Information für das Erscheinungsbild der Webseite an einem einzigen Ort definiert und kann hier jederzeit überprüft, gepflegt oder angepasst werden.
Designer sind näher an der tatsächlichen Umsetzung ihrer Ideen beteiligt und können selbst Änderungen an den Design-Tokens vornehmen, indem sie die Konfiguration anpassen. Dadurch wird die Zusammenarbeit zwischen Designer und Entwickler erleichtert und eine einheitliche Gestaltung vereinfacht.
Ein Beispiel:
module.exports = { content: ['./src/**/*.{html,js}'], theme: { colors: { 'brand': '#1fb6ff', 'secondary': '#7e5bef', }, fontFamily: { sans: ['Graphik', 'sans-serif'], serif: ['Merriweather', 'serif'], }, extend: { spacing: { '8xl': '96rem', '9xl': '128rem', }, } }, }
Die Konfiguration zeigt, wo Tailwind-Klassen verwendet und Farben überschrieben werden, genauso wie Schriftart, Schriftgröße und erweiterte Abstände.
Mit Tailwind müssen wir nur an einem einzigen Ort die Grundlagen für alle Stile des Projekts konfigurieren, um Konsistenz zu erzielen.
Lassen Sie sich nicht einschränken
Die Best Practices von Tailwind empfehlen die Verwendung der Konfiguration als wichtigste Quelle aller Elemente. Das bedeutet aber nicht, dass Sie nicht abweichen können. Auf Wunsch können Sie den speziellen Vorgaben Ihres Lieblings-Pixel-Perfektionisten für ein einzigartiges Design folgen.
Zum Beispiel:
p-[22px] // will apply 22px of padding w-[calc(100%-20px)] // will apply the calculated width
Mit Tailwind konfigurieren wir die Grundlagen. Trotzdem können kundenspezifische Werte für bestimmte Elemente verwendet werden, die von den definierten Standards abweichen - für Flexibilität und Freiheit.
Einmal erstellt, mehrmals verwendet
Tailwind-Plugins ermöglichen es Ihnen, komplexe Stile in eigenen Utility-Klassen zu kapseln. Später können Sie diese Plugins oder bereits vorhandene Plugins in jedes beliebige Projekt importieren, um alle von Anfang an zu nutzen.
Ein Beispiel:
const plugin = require('tailwindcss/plugin') module.exports = { plugins: [ plugin(function({ addComponents }) { addComponents({ '.btn-demo': { padding: '.5rem 1rem', borderRadius: '.25rem', fontWeight: '600', }, '.btn-demo-blue': { backgroundColor: '#3490dc', color: '#fff', }, '.btn-demo-red': { backgroundColor: '#e3342f', color: '#fff', }, }) }) ] }
Die Tailwind-Voreinstellungen ermöglichen den Export einer ganzen Konfigurationsdatei. Dadurch ist es möglich, ein Basisthema oder eine Konfiguration mit zahlreichen, definierten Funktionen in mehreren Projekten wiederzuverwenden.
Tailwind speichert gekapselte Merkmale mit Hilfe von Plugins oder ganze Konfigurationen mit Hilfe von Presets und stellt diese zur Verfügung. Klarer Vorteil: Wiederverwendbarkeit und modularer Aufbau.
Optimierte Leistung durch Reduzierung der Größe
Tailwind umfasst verschiedene "out of the box"-Methoden zum Erstellen und Verkleinern der Stile.
Zum Beispiel können wir alle Klassen, die wir in unserer Konfiguration haben (einschließlich der vordefinierten Tailwind-Klassen), löschen, wenn wir sie nicht verwenden.
Wir können auch den "jit"-Modus nutzen (“jit” = "just in time"). In diesem Modus generiert Tailwind das CSS genau dann, wenn es benötigt wird.
Dadurch wird die Menge an CSS, die unser Projekt nutzt, reduziert, wodurch die Anwendung schlanker und die Ladezeit kürzer wird.
Mit Tailwind können wir die Anzahl der erzeugten Formatvorlagen reduzieren und dadurch die Ladezeit und Leistung optimieren.
Folgen Sie bewährten Methoden
Der Tailwind-Styling-Ansatz kann dazu führen, dass sich Code und Stile wiederholen, was dem Entwickler leicht auffällt. Wenn sich eine Struktur wiederholt, werden sie darauf hingewiesen, dass diese in ein Layout oder eine Feature-Komponente verschoben werden sollte, damit sie vereinheitlicht und wiederverwendet werden kann.
Auf diese Weise werden Entwickler ermutigt, Prinzipien wie DRY (Don’t Repeat Yourself), Trennung von Belangen und Modularität zu befolgen.
Gleiches geschieht, wenn man zahlreiche Klassen in ein und dasselbe Element schreibt. Das System schlägt vor, eine bessere Struktur zu finden, um das gleiche Ergebnis zu erzielen.
Tailwind gibt Hinweise, wenn der Aufbau einer Markup-Struktur nicht den Best Practices entspricht.
Open source
Tailwind ist ein Open-Source-Projekt, also ist sein Quellcode für jeden frei verfügbar. Jeder kann ihn nutzen, verändern, verbreiten und vor allem verbessern.
Was sind die Vorteile von Open Source?
Zusammenarbeit
Die Open-Source-Basis ermöglicht es jedem, zur Entwicklung von Tailwind CSS beizutragen.
Dies kann zu einem stärkeren und robusteren Framework führen, da verschiedene Entwickler Dokumentation, Ideen, Code und Fehlerkorrekturen beisteuern.
Transparenz
Open-Source-Software wird in der Regel in einer transparenten Weise entwickelt, sodass jeder sehen kann, wie die Software aufgebaut ist und wie sie funktioniert.
Dies kann für Entwickler nützlich sein, die das Innenleben von Tailwind CSS verstehen und anpassen wollen.
Flexibilität
Da Tailwind CSS als Open Source verfügbar ist, können Entwickler den Quellcode von Tailwind CSS an ihre speziellen Bedürfnisse anpassen.
Besonders in Projekten mit kundenspezifischen Stilen oder Funktionen, die nicht vom Standard-Framework bereitgestellt werden, ist dies sehr nützlich.
Erweiterungen und Struktur
Die Benutzung von Tailwind kann sich als schwierig erweisen, wenn Sie Ihre IDE und Erweiterungen nicht entsprechend vorbereiten.
Mögliche Ursachen sind z.B., dass sich der Entwickler die neuen Utility-Klassen merken muss, dass der Code durch große "Inline-Class-Styles" an Umfang gewinnt oder die Sortierung der verwendeten Klassen.
Zum Glück gibt es eine Vielzahl von Erweiterungen, die die automatische Komplettierung des Codes, das Ausblenden langer Inline-Klassen und das Sortieren der Tailwind-Klassen übernehmen.
Wie gut ist Tailwind gegenüber anderen CSS-Frameworks?
Die Wahl eines CSS-Frameworks ist eine Frage von Präferenzen, weil das CSS zu den Zielen des Projekts und den spezifischen Bedürfnissen passen muss.
Es gibt bestimmte Vorteile und Eigenschaften von Tailwind CSS, die es im Vergleich zu anderen Frameworks zu einer besseren Lösung für viele Projekte machen.
Wann eignet sich Tailwind besser als andere CSS Frameworks?
Der utility-first-Ansatz, die Anpassungsmöglichkeiten, die hohe Performance, die Konsistenz und die Benutzerfreundlichkeit zeigen sich in einer höheren Entwicklungsgeschwindigkeit, Robustheit, einem besseren Markenauftritt und einer optimierten Webseite.
Anpassungsmöglichkeiten
Zuerst einmal bietet Tailwind CSS ein hohes Maß an Flexibilität, für den Entwickler, seine eigenen Stile zu erstellen oder die Standardstile zu überschreiben, um die spezifischen Anforderungen eines Projekts zu erfüllen.
Für Entwickler, die mehr Kontrolle über das Erscheinungsbild ihrer Projekte haben möchten und die Stile an spezifische Designanforderungen anpassen wollen, ist diese Flexibilität sehr wertvoll.
Performance der Webseite
Tailwind CSS generiert eine minimale Menge an CSS, was die Leistung der Webseite verbessern kann. In Zusammenarbeit mit Postprozessoren wie PostCSS wird die Menge der generierten CSS reduziert und mit dem JIT-Modus verarbeitet Tailwind CSS nur die Klassen, die wir verwenden.
Benutzerfreundlichkeit
Tailwind CSS ist einfach zu bedienen, auch für Entwickler, die sich nicht mit dem Frontend und dem Styling der Webseiten beschäftigen. Es bietet eine klare Dokumentation und eine einfache Syntax für die Anwendung sinnvoller Utility-Klassen auf das Markup. So ist es für Entwickler einfacher, Änderungen vorzunehmen und den benötigten Style-Code zu reduzieren. Die Konfiguration wird die gewünschte Konsistenz sicherstellen.
Konsistenz
Die Verwendung einheitlicher Utility-Klassen ermöglicht es den Entwicklern, sicherzustellen, dass die Gestaltung der verschiedenen Elemente in einem Projekt einheitlich ist und denselben Designprinzipien folgt. Kunden können so die Designentscheidungen leichter nachvollziehen und Feedback geben.
Alternative Frameworks bieten möglicherweise eine schnellere Entwicklung, aber weniger Anpassungsmöglichkeiten (komponentenbasiert), oder die gleichen Anpassungsmöglichkeiten, aber mit schlechterer Leistung und weniger Konsistenz.
Die Verwendung von Tailwind bei 1xINTERNET
Unser Frontend besteht aus den folgenden Technologien:
Drupal Theme-Layer unter Verwendung von Twig
ReactJS-Apps sowohl als Single-Page-Anwendungen als auch als eingebettete Webanwendung
Webkomponenten zur Erstellung wiederverwendbarer Elemente für beliebige Frontend-Technologien und Designsysteme
In den meisten unserer Frontends sind all diese Technologien vorhanden. Ein typisches webbasiertes Projekt hat ein traditionelles Frontend mit Drupal Theming Layer. Die interaktiven Elemente der Webseite werden mit ReactJS erstellt. Für die meisten Projekte ist dies das optimale Setup.
Warum die Kombination der Frontend-Technologie von Drupal mit ReactJS eine gute Wahl ist
Die gemeinsamen Elemente in Twig und React werden mit Webkomponenten erstellt. Zu den gemeinsam genutzten Elementen gehören beispielsweise Schaltflächen, Karten, Registerkarten und Listen. Um die Revision der gemeinsamen Elemente zu erleichtern, bauen wir sie als Designsystem auf.
Wir verwenden Tailwind CSS für alle Technologien und teilen ihre Konfiguration. Das Ergebnis ist, dass eine in Tailwind CSS implementierte Designänderung sofort auf alle Webkomponenten, alle Twig-Templates und alle React-Webapps auf der Webseite angewendet wird.
Für unsere Entwickler macht dieser Ansatz die Anwendung von Änderungen an einem Frontend sehr viel transparenter. Sie können den Styling-Prozess für alle Technologien leicht nachvollziehen. Das Gleiche gilt für verschiedene Projekte. Die Entwickler können projektübergreifend zusammenarbeiten, weil wir unsere Frontend-Technologien so weit wie möglich wiederverwenden.
Digital Experience Plattform (DXP)
Unsere Lösung DXP ist eine Webplattform, die Grundlage für alle unsere digitalen Lösungen. Sie besteht aus einem Content-Management-System auf Basis von Drupal mit einer vordefinierten Ebene (theming layer) aus Webkomponenten.
Die Plattform verfügt über ein integriertes Designsystem, das für die Arbeit mit Figma vorbereitet ist. Sowohl die Ebene (theming layer) als auch die Webkomponenten-Bibliothek werden mit Tailwind CSS erstellt.
Kundenprojekte
Die meisten Projekte, die wir umsetzen, basieren auf unserer DXP-Lösung, d.h. sie beginnen alle mit unseren Tailwind-Voreinstellungen und Quartz als Designsystem.
Diese Grundlage passen wir an die jeweiligen Kundenbedürfnisse an. Die Verwendung unseres soliden Standards in all unseren Projekten führt zu einer hohen Entwicklungsleistung, Konsistenz, robusten Ergebnissen und einer soliden Basis für jedes Projekt.
Was sagen unsere Entwickler?
"Die Möglichkeit, Plugins zu schreiben, die benutzerdefinierte Utility-Klassen generieren, ist etwas, das ich von anderen Frameworks nicht kannte, und ich finde es sehr nützlich.
Es ist viel schneller, CSS mit Utility-Klassen zu schreiben, sobald man sie sich merken kann".
John Durance, Full Stack Entwickler bei 1xINTERNET
"I especially like it in combination with PostCSS that dumps all Tailwind CSS from the result.css that are not used in the project and keeps the result.css file as small as possible.
Having a tailwind.config.js where you can simply configure EVERYTHING in one single place by either customising the defaults or adding new defaults is a huge time saver.
I always thought that having lots of utility classes in your markup makes it unreadable but the opposite is true: I can immediately visualise just by the classes that are used what I will see in the end while when using custom classes I have to look through multiple custom CSS first to get to know what's going on".
Norman Kämper-Leymann, Full Stack Developer bei 1xINTERNET
"I like that it helps developers to think of styling as a system too (instead of using random class names and random values) and helps to keep consistency through the whole codebase".
Tamás Hajas, Frontend Developer bei 1xINTERNET
Weitere Highlights
Die Entwicklung eines kollaborativen Designprozesses
Für den Erfolg eines Webprojekts ist ein funktionierender Workflow zwischen Designern und...
Kollaborativer Workflow zwischen Designern und Entwicklern
Die Zusammenarbeit zwischen Designern und Entwicklern ist ein wesentlicher Faktor für den Erfolg...