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.

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

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.

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

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.

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.

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.

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?

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.

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