In diesem Teil unserer Serie "WordPress meets Tailwind" tauchen wir in die Welt der Responsiveness ein. Tailwind CSS, bekannt für seinen Utility-First-Ansatz, ermöglicht es dir, Responsiveness auf eine einfache und effiziente Weise zu integrieren. Der Utility-First-Ansatz beinhaltet, dass vordefinierte Klassen direkt im HTML-Markup verwendet werden, um das Styling zu definieren. Jede Klasse entspricht einer bestimmten CSS-Eigenschaft, was die Gestaltung flexibler und effizienter macht.

In unserem vorherigen Blogartikel haben wir bereits beschrieben, wie du Tailwind CSS installieren und anpassen kannst.

Lass uns nun auf die verschiedenen Konzepte zur Responsiveness schauen!

Responsiveness

Responsiveness bedeutet, dass eine Website sich nahtlos an verschiedene Gerätetypen und Bildschirmgrößen anpasst und somit dem Nutzer immer eine optimale Darstellung bieten kann. Dies ist entscheidend, um so viele Nutzer wie möglich anzusprechen. Ein responsives Website Layout reagiert auf das Gerät des Nutzers und bietet überall eine optimale Darstellung und Bedienbarkeit. Für eine effektive Entwicklung ist es daher essentiell, die bevorzugten Geräte der Zielgruppe zu kennen und die Layouts und Designs entsprechend anzupassen.

Die Umsetzung wird Responsive Design genannt, ein Ansatz, der Websites für alle Endgeräte anpassungsfähig macht und so optimale Nutzererfahrung sicherstellt.

Breakpoints

Für die Realisierung müssen im Code sogenannte Breakpoints festgelegt werden, dies geschieht üblicherweise durch CSS Media Queries. Breakpoints beschreiben die horizontale Breite eines Endgerätes mit der Einheit Pixel. Ab einem gewählten Breakpoint werden die Eigenschaften übernommen, die zuvor definiert worden sind.

Konkrete Anwendungsfälle werden unten in den Beispielen gezeigt.

Mobile First

Der Mobile-First-Ansatz beinhaltet das Entwickeln eines Designs, das sich an verschiedene Bildschirmgrößen anpasst und die mobile Ansicht priorisiert, um schnellere Ladezeiten und eine bessere Benutzererfahrung auf kleinen Bildschirmen zu gewährleisten.

Was Tailwind CSS daraus macht

Tailwind CSS nutzt den Mobile-First-Ansatz als Standard.

Beim Mobile-First-Ansatz in Tailwind CSS legst du zuerst den Stil für kleine Bildschirme wie Handys fest, ohne spezifische Breakpoints anzugeben. Das bedeutet, dass du die Stile für die kleinste Bildschirmbreite definierst, ohne Breakpoints festzulegen, da das der Ausgangspunkt ist. Wenn du größere Bildschirme ansprechen musst, fügst du Breakpoints hinzu und passt die Stile für diese größeren Bildschirme an. Anders ausgedrückt: Du startest mit den grundlegenden Stilen für Mobilgeräte und fügst bei Bedarf Breakpoints hinzu, um die Darstellung auf größeren Bildschirmen anzupassen.

Zum Spezifizieren der angesprochenen Bildschirmgröße bietet Tailwind Präfixe an, die man einfach vor die Klassen hängt. Tailwind orientiert sich mit seinen Default-Werten an Mobile-, Tablet- und Desktop-Größen. Die drei gängigsten Default-Größen sind hier:

Tabelle der Default-Werte von Tailwinds Breakpoints mit Präfix und CSS Bedeutung

Diese Default-Größen sind konfigurierbar. Erweiterte Angaben kannst du nochmal in der Tailwind Doku nachschlagen.

Die Präfixe sind außerdem konfigurierbar. Man hat zudem die Möglichkeit, die Größe der Präfixe nach Belieben in der tailwind.config Datei zu ändern und eigene Breakpoints festzulegen.

Um dir die oben genannten Breakpoints besser zu veranschaulichen, haben wir hier noch ein paar Beispiele mit den von Tailwind CSS vordefinierten Größen und Präfixen.

Anwendungsfall Schriftgrößen

In unserem Beispiel wird die H1 standardmäßig auf Mobilgeräten in der Größe text-lg dargestellt, je größer die Bildschirmbreite wird, desto größer sollte auch die Schrift werden. Daher nutzen wir hier die entsprechenden Präfixe md und lg.

Das kann dann für eine H1 Schrift so aussehen:

<h1 class="text-lg md:text-xl lg:text-4xl">
    BizFactory
</h1>

Ein visuelles Beispiel von auf Bildschirmgröße angepasste Schriftgrößen

Hier wurden der Reihe nach die Schriftgrößen von klein (Smartphone) bis groß (Desktop) definiert. Der Text wird die letzte Größe “text-4xl” nun ab einer bestimmten Größe anzeigen. Um genau zu sein, ab einer Bildschirmgröße von 769 Pixeln, denn der Präfix “md:” definiert die Größe des Textes bis zu dem Breakpoint von 768px.

Anwendungsfall Anordnungen

In diesem Anschauungs-Beispiel nutzen wir das Weblayout-Modell “flex”. Mit ‘flex’ hat man die Möglichkeit zur dynamischen Anordnung von Elementen. Kombiniert mit den Präfixen, kann man so die Anordnung von Elementen mühelos abhängig von den Bildschirmgrößen gestalten. Gängig ist es beispielsweise, eine Reihe von Inhalten in der mobilen Version von oben nach unten und auf Desktopgrößen von links nach rechts zu arrangieren.

<div class="flex flex-col md:flex-row">
    <div>
        <div> mini </div>
        <div> mini </div>
        <div> mini </div>
    </div>
    <div>
        <div> max </div>
    </div>
</div>

Visuelles Beispiel einer Unterschiedlichen Anordnung je Bildschirmgröße

Anwendungsfall Hidden

Um in Tailwind CSS einen Text speziell für Desktop-Nutzer anzuzeigen, verwenden wir die Klasse “hidden” und zusätzlich eine Display-Klasse mit einem Breakpoint-Präfix. Hierbei ist “hidden” eine Klasse, welche Elemente standardmäßig versteckt (Mobile first). Als Display Klasse kann z.B. “block” verwendet werden.

Ein Tag mit der Klasse “hidden” und dem Präfix für Middle "md:" bedeutet, dass ab einer Bildschirmgröße von 768px das div nicht mehr angezeigt wird.

<div class="md:hidden">
    Versteck mich vor mobilen Usern!
</div>

Visuelles Beispiel einer falschen Hidden-Anwendung

Wenn wir das Element aber ab einer Pixelgröße von mehr als 768px sehen möchten, muss dafür eine Klasse für die Desktopgröße definiert werden, z.B. mit “md:block”. Du kannst "block" auch durch "flex", "inline" oder jede andere Display-Klasse ersetzen.

Richtig wäre hier:

<div class="hidden md:block">
    Versteck mich vor mobilen Usern!
</div>

Visuelles Beispiel einer korrekten Hidden-Anwendung

Mit dem Mobile-First-Ansatz von Tailwind wird der Text zunächst auf kleineren Bildschirmen versteckt. Sobald der Bildschirm die Grenze von md (768px) überschreitet, wird die hidden-Klasse durch die md:block-Klasse überschrieben, und der Text wird sichtbar.

In einer für Menschen verständlichen Sprache bedeutet das:

“Dieser Tag ist durch die Klasse 'hidden' bis zu einer Bildschirmgröße von md (767px) nicht zu sehen, ab md und mehr bin ich sichtbar.”

Fazit

Das Spannende hier ist die Anwendung. Man kann mit dem Responsive Design alle Tailwind Eigenschaften im Code anpassen. Farben, Texte, Bildgrößen und auch Eigenschaften der Flex- und Gridboxen... also wirklich alle!

Wir wünschen dir nun viel Spaß beim Entdecken. Bleib dran für weitere Tailwind CSS Tipps oder melde dich bei uns, wenn noch Fragen offen sind!