Pseudoklassen mit Tailwind CSS

Wer bereits mit Tailwind gearbeitet hat, wird im Laufe der Zeit immer wieder auf die gleichen Probleme stoßen für die es häufig eine elegante Lösung gibt, wenn man diese kennt. In diesem Beitrag werden wir uns die Anwendung von Pseudoklassen mit Tailwind genauer anschauen und passende Tailwind-Life-Hacks zeigen.

Hinweis: Die Beispiele verwenden die Tailwind-Version: 3.4.3

Was ist eine CSS Pseudoklasse?

Pseudoklassen werden direkt hinter dem Selektor angegeben und dienen dazu einen Regelblock anzuwenden, wenn das Element eine bestimmte Eigenschaft hat. Der Name von Pseudoklassen ist vorgegeben und beginnt immer mit einem Doppelpunkt.

Drei häufig verwendete Beispiele hierfür sind:

• :hover wird ausgelöst, sobald der Mauszeiger das Element berührt.
• :focus wird ausgelöst, sobald das Element ausgewählt ist. Das ist insbesondere dann relevant, wenn die Webseite mit der Tastatur bedient wird.
• :checked wird ausgelöst, sobald ein Formularelement ausgewählt wurde, beispielsweise eine Checkbox.

Anwendungsbeispiel für eine Pseudoklasse mit nativem CSS

<a href="#">Beispiel-Link</a>

a {
    color: #0b84c7;
}

a:hover {
    color: #182226;
}

Anwendungsbeispiel für eine Pseudoklasse mit Tailwind

<a class="text-blue-500 hover:text-black-800" href="#">Beispiel-Link</a>
    

Erläuterung

Sobald der Link (a-tag) mit dem Mauszeiger berührt wird, erhält er die in Tailwind hinterlegte Farbe für "black-800"

Pseudoklasse soll sich auf ein Kind-Element auswirken

Im obrigen Beispiel färbt sich der Linktext um, sobald der Mauszeiger den Linktext berührt d.h. das Element, das den Effekt auslöst ist gleichzeitig das Zielelement. Nun soll sich die Farbe des Textes (Kindelelement, child) umfärben, sobald man der Mauszeiger das blaue Element (Eltern-Element, parent) berührt. Das blaue Element ist somit das auslösende Element, das Zielelement jedoch der Text.

Anwendungsbeispiel Pseudoklasse mit Kindelement mit nativem CSS

<div class="box-01">
<a href="#">Beispiel-Link</a>
<div>

.box-01 {
    width: fit-content;
    background-color: rgb(74 222 128);
    padding: 2rem;
    border-radius: 1rem;
}

.box-01 a {
    color: #fff;
}

.box-01:hover a {
    color: #182226;
}

Anwendungsbeispiel Pseudoklasse mit Kindelement mit Tailwind

<div class="group w-fit bg-blue-500 p-8 rounded-2xl mb-4">
<a href="#" class="text-white group-hover:text-black-800" >Beispiel-Link</a>
<div>

Erläuterung

Sobald das Element mit der Klasse "group" mit dem Mauszeiger berührt wird, erhält das Kind-Element (der Link) die in Tailwind hinterlegte Farbe für "black-800"

Pseudoklasse soll sich auf ein Geschwister-Element auswirken

Die Anwendung von group ist nur von Elternelement als Auslöser zum Kind-Element als Ziel möglich. Möchte man die Geschwister-Elemente (siblings) beeinflussen, benötigt man mit nativem CSS die Tilde (~) und mit Tailwind die Klasse "peer".

Anwendungsbeispiel mit Pseudoklasse, die sich auf ein Geschwister-Element auswirkt mit nativem CSS

<div class="box-02-container">
    <div class="box-02"></div>
    <div class="box-02-sibling"></div>
    <div class="box-02-sibling"></div>
</div>

.box-02-container {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.box-02 {
    width: fit-content;
    background-color: rgb(74 222 128);
    padding: 4rem;
    border-radius: 1rem;
}

.box-02-sibling {
    width: fit-content;
    background-color: rgb(251 146 60);
    padding: 4rem;
    border-radius: 1rem;
}

.box-02:hover ~ .box-02-sibling {
    background-color: rgb(74 222 128);
}

Anwendungsbeispiel mit Pseudoklasse, die sich auf ein Geschwister-Element auswirkt mit Tailwind

<div class="flex gap-4">
    <div class="peer w-fit bg-blue-500 p-16 rounded-2xl mb-4"></div>
    <div class="peer-hover:bg-blue-500 w-fit bg-black-800 p-16 rounded-2xl mb-4"></div>
    <div class="peer-hover:bg-blue-500 w-fit bg-black-800 p-16 rounded-2xl mb-4"></div>
</div>

Erläuterung

Sobald das Element mit der Klasse "peer" mit dem Mauszeiger berührt wird, erhalten die Geschwister-Elemente mit der Klasse "peer-hover:bg-blue-500" die in Tailwind hinterlegte Farbe für "blue-500"

Pseudoklasse soll sich auf ein Eltern-Element auswirken

Das schwarze Quadrat ist das Kind-Element (child) und soll ausgelöst werden, sobald es vom Mauszeiger berührt wird. Das blaue Eltern-Element (parent) ist das Zielelement, auf das sich die Änderung auswirken soll.

Anwendungsbeispiel mit Pseudoklasse, die sich auf ein Eltern-Element auswirkt nativem CSS

Hinweis: Vor Verwendung der Pseudoklasse ":has()" sollte überprüft werden, ob der gewünsche Browser damit kompatibel ist. Dies ist auf caniuse.com möglich.

<div class="box-03-parent">
    <div class="box-03-child"></div>
</div>

.box-03-parent {
    width: fit-content;
    background-color: rgb(74 222 128);
    padding: 4rem;
    border-radius: 1rem;
    margin-bottom: 1rem;
}

.box-03-child {
    width: fit-content;
    background-color: rgb(251 146 60);
    padding: 1rem;
}

.box-03-parent:has(.box-03-child:hover) {
    background-color: rgb(251 146 60);
}

Anwendungsbeispiel mit Pseudoklasse, die sich auf ein Eltern-Element auswirkt mit Tailwind

<div class="has-[>:hover]:bg-black-800 w-fit bg-blue-500 p-16 rounded-2xl mb-4">
    <div class="bg-black-800 p-4"></div>
</div>

Erläuterung

Sobald das Kind-Element (kleines, schwarzes Quadrat) mit dem Mauszeiger berührt wird, erhält das Eltern-Element (blaues Quadrat) die in Tailwind hinterlegte Farbe für "black-800"

Eigene Pseudoklassen mit Tailwind erstellen

Nach diesen eher grundlegenden Erklärungen, kommen wir nun zum ersten Tailwind-Life-Hack: dem erstellen eigener Pseudoklassen. Zunächst muss hierfür eine Änderung in der tailwind.config.js vorgenommen werden.

Plugin zum Erstellen einer eigenen Pseudo-Klasse

Es gibt nützliche Funktionalitäten, die noch nicht in der aktuellen Tailwind-Version vorhanden sind, aber bereits entwickelt wurden und verwendet werden können. Im Folgenden soll nun ein Plugin verwendet werden, das ermöglicht eigene Pseudoklassen zu erstellen. Der Name der neuen Pseudoklasse kann frei gewählt werden und soll in diesem Beispiel "expanded" sein. Link zur Tailwind-Dokumentation

tailwind.config.js

const plugin = require("tailwindcss/plugin");
module.exports = {
    content: ["./src/**/*.{html,js}"],
    plugins: [
    plugin(({ addVariant }) => {
        addVariant("expanded", "&:merge(.expanded).expanded");
        addVariant("group-expanded", ":merge(.group).expanded &");
    }),
    ],
};

Anwendungsbeispiel

Nach Klick auf den Button soll ein Bild sichtbar werden. Über Javascript wird die Klasse "expanded" dem Elternelement hinzugefügt. Erst dann greifen die bereits gesetzten "group-expanded:"-Tailwind-Klassen.

Klickbares Element

<button class="group w-full expanded" data-expanded>
    <div
        class="bg-blue-500 mt-4 p-2 rounded-2xl cursor-pointer group-expanded:rounded-br-none group-expanded:rounded-bl-none">
        Klickbares Element
    </div>
    <img src="/public/Images/dm_sommerfest.webp"
        class="w-full h-auto max-h-[37.5rem] object-cover rounded-br-lg rounded-bl-lg hidden group-expanded:block" />
</button>

const expandedElement = document.querySelector("[data-expanded]");
expandedElement.addEventListener("click", () => {
    expandedElement.classList.toggle("expanded");
});

Erläuterung

Über Javascript wird die Klasse "expanded" hinzugefügt, sobald man auf das Element klickt. Nach einem weiteren Klick wird diese Klasse wieder durch toggle entfernt. Nur wenn das Eltern-Element die Klasse "expanded" hat, greifen folgende CSS-Anweisungen: Der Rahmen des Buttons wird angepasst und das Bild wird nun dargestellt.

Wozu ist das gut?

Auf diese Weise muss über Javascript nur eine Klasse hinzugefügt werden, anstatt mehrere. Außerdem ist im HTML einfacher erkennbar, an welcher Stelle Javascript eingreifen wird.

Verschachtelung des Group-Zustands

Möchte man innerhalb eines Elements "group" mehrmals verwendet, wird das nicht funktionieren. Somit kommen wir nun zum zweiten Tailwind-Life-Hack.

Umsetzung mit Tailwind:

<div class="group bg-blue-500 p-4 text-white-900 w-64" >Element eins
    <div class="group bg-blue-500 group-hover:bg-white text-white-900 group-hover:text-blue-500 p-4" >Element zwei
        <div class="bg-blue-500 group-hover:bg-black-800 text-white-900 p-4" >Element drei</div>
    </div>
</div>

Das entspricht in nativem CSS folgendem:

<div class="nesting-01-01">Element eins
    <div class="nesting-01-02">Element zwei
        <div class="nesting-01-03">Element drei</div>
    </div>
</div>

.nesting-01-01 {
    background-color: #0b84c7;
    color: #fff;
    padding: 1rem;
    width: 16rem;
    border-radius: 1rem;
  }

  .nesting-01-02 {
    background-color: #0b84c7;
    color: #fff;
    padding: 1rem;
    border-radius: 1rem;
  }

  .nesting-01-03 {
    background-color: #0b84c7;
    color: #fff;
    padding: 1rem;
    border-radius: 1rem;
  }

  .tailwind-blog .nesting-01-01:hover .nesting-01-02 {
    background-color: #fff;
    color: #0b84c7;
  }

  .tailwind-blog .nesting-01-01:hover .nesting-01-03 {
    background-color: #182226;
    color: #fff;
  }
    

Gewünscht ist:

• Mauszeiger berührt "Element eins", woraufhin "Element zwei" eine andere Hintergrundfarbe erhalten soll.
• Mauszeiger berührt" Element zwei", woraufhin "Element drei" eine andere Hintergrundfarbe erhalten soll.

Aktuell passiert jedoch folgendes:

• Mauszeiger berührt "Element eins", " Element zwei" und "Element drei" erhalten beide direkt eine andere Hintergrundfarbe.

Das Problem ist, dass Unklarheit darüber herrscht, wie die Auswirkungen von "group-hover:" zugeordnet werden sollen. Deshalb werden sie alle der ersten "group" zugeordnet. Die Gruppen benötigen somit einen einzigartigen Gruppennamen.

Umsetzung mit Tailwind:

<div class="group/first bg-blue-500 p-4 text-white-900 w-64" >Element eins
    <div class="group/second bg-blue-500 group-hover/first:bg-white text-white-900 group-hover/first:text-blue-500 p-4" >Element zwei
        <div class="bg-blue-500 group-hover/second:bg-black-800 text-white-900 p-4" >Element drei</div>
     </div>
</div>
    

Das entspricht in nativem CSS folgendem:

<div class="nesting-02-01">Element eins
    <div
        class="nesting-02-02">
        Element zwei
        <div class="nesting-02-03">Element drei</div>
    </div>
</div>

.nesting-02-01 {
    background-color: #0b84c7;
    color: #fff;
    padding: 1rem;
    width: 16rem;
    border-radius: 1rem;
  }

  .nesting-02-02 {
    background-color: #0b84c7;
    color: #fff;
    padding: 1rem;
    border-radius: 1rem;
  }

  .nesting-02-03 {
    background-color: #0b84c7;
    color: #fff;
    padding: 1rem;
    border-radius: 1rem;
  }

  .tailwind-blog .nesting-02-01:hover .nesting-02-02 {
    background-color: #fff;
    color: #0b84c7;
  }

  .tailwind-blog .nesting-02-02:hover .nesting-02-03 {
    background-color: #182226;
    color: #fff;
  }
    

Berührt der Mauszeiger "Element eins" erhält nun nur noch "Element zwei" eine neue Hintergrundfarbe. Um "Element drei" eine neue Hintergrundfarbe zu verleihen, muss erst "Element zwei" mit dem Mauszeiger berührt werden.

Tailwind Dokumenation

Wer mehr zu diesem Thema nachlesen möchte, sollte sich folgende Stellen in der Tailwind-Dokumentation anschauen:

• Hover, Focus und weitere Zustände
• Pseudoklassen
• differenziert geschachtelte Gruppen