Eigene Gruppen-Varianten in Tailwind CSS erstellen
Webentwicklung

Eigene Gruppen-Varianten in Tailwind CSS erstellen

06.03.2025

Gruppen finden in Tailwind vor allem für Pseudoklassen Anwendung. Wobei es sich darum handelt, wird nun anhand eines simplen Beispiels erklärt.

Beispiel für einen Button, der eine Gruppe und Hover verwendet

Beispiel-Link
<div class="group w-fit bg-blue-500 p-8 rounded-2xl mb-4">
<a href="https://tailwindcss.com/docs/hover-focus-and-other-states#pseudo-classes" class="text-white group-hover:text-black-800" >Link zur Tailwind-Dokumenation</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". Eine genauere Erklärung zu Pseudoklassen und deren Anwendung in Gruppen, kann man in unserem Blogbeitrag Pseudoklassen mit Tailwind CSS nachlesen.

Dieses mal soll es darum gehen, wie man eigene Gruppen-Varianten in Tailwind CSS erstellt, ein Vorgang, den man im Englischen mit "group-variants as an arbitrary value" beschreibt. Bei der Entwicklung von interaktiven Elementen, entsteht häufig das Bedürfnis eigene Gruppen-Varianten zu erstellen, was nun anhand eines Code-Beispiels erläutert wird.

Hinweis: Verwendete Tailwind-Version: 3.4.3

Anwendungsbeispiele für eigene Gruppen-Varianten

Dies könnte zum Beispiel folgendes sein:

  • "disabled" für einen Button, der zu der nächsten Seite blättert, sich aber bereits am Ende befindet, weshalb dieser deaktiviert werden soll.
  • "expanded" für ein Akkordeon im ausgeklappten Zustand.

Codebeispiel Akkordeon

Erste Frage eines FAQs

Eigentlich müsste man nach Klick per Javascript folgende Klassen anpassen

  • Die Tailwind-Klasse "rotate-180" dem Button hinzufügen zum Drehen der Grafik
  • Die Tailwind-Klasse "block" dem Text hinzufügen, damit dieser dargestellt wird
  • Die Tailwind-Klasse "hidden" entfernen, falls das hinzufügen von "block" nicht ausreichend ist

Stattdessen soll ausschließlich die Klasse "expanded" per Javascript hinzugefügt oder entfernt werden.

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

Die HTML-Struktur mit den Tailwind-Klassen sieht folgendermaßen aus:

<div class="group/expanded" data-accordion-01>
    <div class="flex items-center justify-between gap-4 w-full py-2 bg-blue-500">
        <p class="text-white mb-0">Erste Frage eines FAQs</p>
        <button class="w-6 h-6 flex items-center justify-center group-expanded/expanded:rotate-180 bg-blue-500" data-accordion-01-button>
            <svg xmlns="http://www.w3.org/2000/svg" class="text-white" width="15.546" height="9.187" viewBox="0 0 15.546 9.187" id="arrow-editable">
                <path id="Pfad_32353" data-name="Pfad 32353" d="M906.374,169.918l7.066,7.066,7.066-7.066" transform="translate(-905.667 -169.211)" fill="none" stroke="currentColor" stroke-width="2" />
            </svg>
        </button>
    </div>
    <p class="hidden group-expanded/expanded:block py-2">Lorem ipsum dolor sit amet consectetur...</p>
</div>

Erläuterung

  • Die Tailwind-Klasse "group/expanded" hat mehrere Funktionen. "group" gibt an, dass Änderungen an diesem Element sich auch auf Kind-Elemente auswirken können. "expanded" ist der Name der eigenen Gruppen-Variante. Dieser kann beliebig gewählt werden.
  • Die Tailwind-Klasse "group-expanded/expanded:rotate-180" hat folgende Bedeutung: Wenn das Eltern-Element mit der Klasse "group/expanded" zusätzlich die Klasse "expanded" hat, welche in diesem Beispiel per Javascript hinzugefügt wird, dann wende auf dieses Kind-Element die Klasse "rotate-180" an.

Voraussetzung

Zum Erstellen einer eigenen Gruppen-Variante, muss die Konfiguration in der tailwind.config.cjs angepasst werden.

Notwendig, damit Anweisungen für Tailwind-Plugins überhaupt funktionieren

const plugin = require("tailwindcss/plugin");

Dies ermöglicht, dass Anweisungen mit der Gruppen-Variante "expanded" im selben Element funktionieren.

plugin(({ addVariant }) => {
    addVariant("expanded", "&:merge(.expanded).expanded");
    }),

Dies ermöglicht, dass Anweisungen mit der Gruppen-Variante "expanded" bei der Verwendung von "group/expanded" auch bei Kind-Elementen funktionieren.

require("tailwindcss/plugin")(({ matchVariant }) => {
    matchVariant("group", (value = "", { modifier }) => (modifier ? `:merge(.group\\/${modifier}).expanded &` : `:merge(.group).expanded &`), {
        values: { expanded: "expanded" },
    });
}),

Der vollständige Code sieht folgendermaßen aus

const plugin = require("tailwindcss/plugin");
module.exports = {
    plugins: [
    require("tailwindcss/plugin")(({ matchVariant }) => {
        matchVariant("group", (value = "", { modifier }) => (modifier ? `:merge(.group\\/${modifier}).expanded &` : `:merge(.group).expanded &`), {
        values: { expanded: "expanded" },
        });
    }),
    plugin(({ addVariant }) => {
        addVariant("expanded", "&:merge(.expanded).expanded");
    }),
    ],
};

Hinweis

Falls die neue Gruppen-Varianten nicht erkannt werden, könnte ein Neustart des Kompilierungsprozesses das Problem lösen.

Scroll TopScroll Top