Warianty group i peer
Używać wzorców group i peer do stylowania elementów potomnych na podstawie stanu elementu nadrzędnego lub sąsiedniego.
Warianty group i peer to bezpłatna lekcja Tailwind CSS Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Tailwind CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Tailwind CSS Academy zawiera 4 lekcji w sumie.
Stylizowanie elementów potomnych na podstawie stanu elementu nadrzędnego
Częstym wyzwaniem w interfejsach jest potrzeba stylizowania elementu potomnego na podstawie stanu jego elementu nadrzędnego. W zwykłym CSS wymaga to użycia kombinatora rodzic–dziecko i własnych nazw klas. Warianty group i group-* Tailwind rozwiązują ten problem w przejrzysty sposób: należy oznaczyć element nadrzędny klasą group, a następnie poprzedzić dowolne narzędzie elementu potomnego wariantem group-hover:, group-focus: lub innym wariantem group, aby zastosować style, gdy element nadrzędny wejdzie w dany stan.
<!-- Arrow icon appears only on card hover -->
<div class="group flex items-center gap-3 bg-white border rounded-xl p-4 hover:border-blue-500 cursor-pointer transition-colors">
<div class="flex-1">
<h3 class="font-semibold">Settings</h3>
<p class="text-sm text-gray-500">Manage your account</p>
</div>
<!-- Arrow is invisible by default, visible on group hover -->
<span class="text-gray-400 group-hover:text-blue-500 group-hover:translate-x-1 transition-all">
→
</span>
</div>Jak działa group
Klasa group na elemencie nadrzędnym tworzy zakres grupy. Wszystkie elementy potomne mogą następnie odwoływać się do tego zakresu za pomocą prefiksów group-{variant}:. Mechanizm opiera się na wygenerowanym CSS Tailwind: group-hover:text-blue-500 zostaje skompilowane do .group:hover .group-hover\:text-blue-500. Oznacza to, że styl elementu potomnego zmienia się tylko wtedy, gdy wskaźnik znajduje się nad przodkiem z klasą group — a nie nad dowolnym przodkiem.
<!-- How group generates CSS -->
<!-- The group class on parent enables hover detection -->
<div class="group">
<!-- group-hover: applies when the group div above is hovered -->
<h2 class="text-gray-700 group-hover:text-blue-600 transition-colors">
Title changes when parent is hovered
</h2>
<p class="text-gray-500 group-hover:text-gray-700 transition-colors">
Description also changes
</p>
</div>group-hover dla nakładek na kartach
Popularnym zastosowaniem group-hover jest wyświetlanie nakładki lub przycisków akcji na karcie, gdy użytkownik umieści wskaźnik nad całą kartą, a nie tylko nad przyciskiem. Oznaczenie karty jako group i użycie na nakładce klas opacity-0 group-hover:opacity-100 sprawia, że nakładka pojawia się dokładnie po wejściu wskaźnika w obszar karty — tworząc elegancki efekt bez użycia JavaScriptu.
<!-- Image card with hover overlay revealed via group -->
<div class="group relative w-48 h-48 rounded-xl overflow-hidden cursor-pointer">
<!-- Background image -->
<div class="absolute inset-0 bg-gradient-to-br from-purple-500 to-pink-600"></div>
<!-- Overlay: invisible by default, visible on group hover -->
<div class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
<button class="bg-white text-gray-900 px-4 py-2 rounded-lg font-medium text-sm">
View Details
</button>
</div>
</div>Nazwane grupy dla zagnieżdżonych zakresów
W przypadku zagnieżdżonych grup funkcja nazwanych grup Tailwind zapobiega niejednoznaczności. Należy użyć group/name, aby oznaczyć grupę identyfikatorem, a na elementach potomnych zastosować group-hover/name:, aby odwołać się do konkretnego przodka. Bez nazwanych grup group-hover: zawsze odwołuje się do najbliższego przodka z klasą group, co w głęboko zagnieżdżonych strukturach może nie być pożądane.
<!-- Named groups prevent ambiguity in nested structures -->
<div class="group/card border rounded-xl p-4 hover:shadow-md transition-shadow">
<h3 class="font-bold group-hover/card:text-blue-600 transition-colors">Card Title</h3>
<!-- Inner list item group -->
<ul class="mt-3 space-y-2">
<li class="group/item flex items-center gap-2 cursor-pointer rounded px-2 py-1 hover:bg-gray-50">
<span class="text-sm group-hover/item:font-medium">First item</span>
<span class="ml-auto text-gray-400 opacity-0 group-hover/item:opacity-100 transition-opacity">→</span>
</li>
<li class="group/item flex items-center gap-2 cursor-pointer rounded px-2 py-1 hover:bg-gray-50">
<span class="text-sm group-hover/item:font-medium">Second item</span>
<span class="ml-auto text-gray-400 opacity-0 group-hover/item:opacity-100 transition-opacity">→</span>
</li>
</ul>
</div>group-focus dla interaktywnych elementów nadrzędnych
group-focus: uruchamia się, gdy element nadrzędny otrzyma fokus klawiatury. Jest to szczególnie przydatne w niestandardowych komponentach przesyłania plików, selektorach kolorów i innych złożonych kontrolkach, w których fokus otrzymuje kontener, ale wewnętrzne etykiety lub ikony powinny zmienić wygląd. Rezultatem jest dostępna złożona kontrolka, która jednocześnie pokazuje wskazówki fokusu na wszystkich swoich częściach.
<!-- Custom file upload with group-focus styling -->
<label class="group flex flex-col items-center justify-center border-2 border-dashed border-gray-300 rounded-xl p-8 cursor-pointer hover:border-blue-400 focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-500/20 transition-all">
<input type="file" class="sr-only" />
<div class="text-4xl mb-3 group-hover:scale-110 transition-transform">📁</div>
<p class="font-medium text-gray-600 group-hover:text-blue-600 transition-colors">Click to upload</p>
<p class="text-sm text-gray-400 mt-1">or drag and drop</p>
</label>Wprowadzenie do wariantu peer
O ile group działa w relacji element nadrzędny–potomny, peer działa w relacji element sąsiedni–element sąsiedni. Należy oznaczyć jeden element klasą peer, a następnie użyć wariantu peer-{state}: na kolejnym elemencie sąsiednim, aby stylizować go na podstawie stanu elementu peer. Co ważne, selektory peer działają wyłącznie dla kolejnych elementów sąsiednich w DOM — element peer musi występować przed stylizowanym elementem w kolejności źródła HTML.
<!-- Checkbox peer controls a sibling label's appearance -->
<label class="flex items-center gap-3 cursor-pointer">
<!-- Peer: the checkbox -->
<input type="checkbox" class="peer sr-only" />
<!-- Custom checkbox visual -->
<div class="w-5 h-5 border-2 border-gray-400 rounded peer-checked:bg-blue-500 peer-checked:border-blue-500 flex items-center justify-center transition-all">
<svg class="w-3 h-3 text-white opacity-0 peer-checked:opacity-100 transition-opacity" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" />
</svg>
</div>
<!-- Label changes on peer check -->
<span class="text-gray-700 peer-checked:text-blue-600 peer-checked:font-medium transition-colors">
I agree to the terms
</span>
</label>peer dla etykiet walidacji formularza
Wzorzec peer świetnie sprawdza się przy wyświetlaniu komunikatów walidacyjnych reagujących na stan pola input. Pole input z atrybutem required można połączyć z sąsiednim komunikatem o błędzie za pomocą peer-invalid:visible. Gdy pole jest nieprawidłowe — puste po wysłaniu formularza lub zawiera niepoprawnie sformatowaną wartość — sąsiedni komunikat o błędzie staje się widoczny, a wszystko to bez obsługi zdarzeń JavaScript.
<!-- Input with CSS-only validation message via peer -->
<div class="max-w-sm space-y-1">
<label class="block text-sm font-medium">Email</label>
<!-- peer: marks the input -->
<input
type="email"
required
placeholder="Enter valid email"
class="peer w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 invalid:border-red-400 invalid:ring-red-400/20"
/>
<!-- Sibling error: hidden until peer is invalid -->
<p class="hidden peer-invalid:flex text-sm text-red-500 gap-1 items-center">
⚠ Please enter a valid email address
</p>
</div>peer-focus dla pływających etykiet
Wzorzec pływającej etykiety — w którym placeholder unosi się i staje się etykietą po uzyskaniu fokusu przez pole — można zbudować za pomocą peer i peer-focus:. Pole input otrzymuje klasę peer, a etykieta (występująca po polu input w DOM) używa peer-focus:-translate-y-6 peer-focus:text-xs peer-focus:text-blue-500, aby unieść się po uzyskaniu fokusu przez pole.
<!-- Floating label with peer-focus -->
<div class="relative max-w-sm">
<input
type="text"
placeholder=" "
class="peer w-full border border-gray-300 rounded-lg px-4 pt-6 pb-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
/>
<!-- Label floats when input is focused or has content -->
<label class="absolute left-4 top-4 text-gray-400 text-sm transition-all peer-focus:top-1.5 peer-focus:text-xs peer-focus:text-blue-500 peer-[:not(:placeholder-shown)]:top-1.5 peer-[:not(:placeholder-shown)]:text-xs pointer-events-none">
First Name
</label>
</div>Nazwane elementy peer dla wielu elementów sąsiednich
Podobnie jak w przypadku nazwanych grup, można tworzyć nazwane elementy peer za pomocą peer/name i odwoływać się do nich przez peer-checked/name:. Umożliwia to umieszczenie wielu elementów peer na tym samym poziomie i stylizowanie różnych elementów sąsiednich na podstawie różnych elementów peer. Bez nazwanych elementów peer peer-checked: odwoływałby się do ostatniego poprzedniego elementu sąsiedniego z klasą peer.
<!-- Named peers for radio-controlled tabs -->
<div class="space-y-2">
<!-- Radio inputs as peers -->
<input type="radio" name="tab" id="tab1" class="peer/tab1 sr-only" checked />
<input type="radio" name="tab" id="tab2" class="peer/tab2 sr-only" />
<!-- Tab labels react to their specific peer -->
<div class="flex border-b">
<label for="tab1" class="px-4 py-2 cursor-pointer border-b-2 border-transparent peer-checked/tab1:border-blue-500 peer-checked/tab1:text-blue-600 font-medium transition-colors">
Overview
</label>
<label for="tab2" class="px-4 py-2 cursor-pointer border-b-2 border-transparent peer-checked/tab2:border-blue-500 peer-checked/tab2:text-blue-600 font-medium transition-colors">
Settings
</label>
</div>
</div>group-checked dla zaznaczania elementów listy
Niestandardowe listy wyboru, w których kliknięcie wiersza zaznacza go, wiele zyskują dzięki połączeniu group z polami wyboru. Oznacz każdy wiersz listy jako group, ukryj właściwe pole wyboru za pomocą sr-only i użyj group-has-[:checked]: (Tailwind v3.4+) albo przełączania klas w JavaScript, aby zmieniać tło wiersza. Dzięki temu powstają przyjazne dla klawiatury, atrakcyjne wizualnie listy wyboru bez złożonej obsługi zdarzeń.
<!-- Selectable list rows using group -->
<ul class="divide-y border rounded-xl overflow-hidden max-w-sm">
<li class="group flex items-center gap-3 px-4 py-3 has-[:checked]:bg-blue-50 has-[:checked]:border-l-4 has-[:checked]:border-l-blue-500 cursor-pointer transition-colors">
<input type="checkbox" class="w-4 h-4 text-blue-600 rounded" />
<span class="font-medium">Alice Johnson</span>
<span class="ml-auto text-sm text-gray-400">Admin</span>
</li>
<li class="group flex items-center gap-3 px-4 py-3 has-[:checked]:bg-blue-50 has-[:checked]:border-l-4 has-[:checked]:border-l-blue-500 cursor-pointer transition-colors">
<input type="checkbox" class="w-4 h-4 text-blue-600 rounded" />
<span class="font-medium">Bob Smith</span>
<span class="ml-auto text-sm text-gray-400">Editor</span>
</li>
</ul>Rzeczywisty przypadek użycia group i peer
Oto rozbudowana karta cenowa, która korzysta zarówno z group, jak i z wyróżniania. Po najechaniu na kartę przycisk CTA zmienia kolor (group-hover), a po zaznaczeniu jej jako rekomendowanego planu cała karta aktualizuje obramowanie i tło. To połączenie wariantów group, peer i stanu umożliwia tworzenie interaktywnego interfejsu bez użycia JavaScriptu.
<!-- Pricing card with group-hover on CTA -->
<div class="group bg-white border-2 border-gray-200 hover:border-blue-500 rounded-2xl p-6 max-w-xs transition-all duration-300 cursor-pointer">
<div class="mb-4">
<span class="text-sm font-medium text-blue-600 bg-blue-50 px-3 py-1 rounded-full">Popular</span>
</div>
<h3 class="text-xl font-bold">Pro Plan</h3>
<p class="text-4xl font-bold mt-2">$29<span class="text-base font-normal text-gray-500">/mo</span></p>
<ul class="mt-4 space-y-2 text-sm text-gray-600">
<li>✓ Unlimited projects</li>
<li>✓ Priority support</li>
<li>✓ Custom domain</li>
</ul>
<!-- CTA changes on card hover using group-hover -->
<button class="mt-6 w-full bg-gray-100 group-hover:bg-blue-600 group-hover:text-white text-gray-700 font-semibold py-2.5 rounded-xl transition-all duration-300">
Get Started
</button>
</div>Szybki test
Sprawdź swoją znajomość zagadnień Tailwind CSS Mastery z tej lekcji.
Podsumowanie lekcji
W tej lekcji nauczyłeś się, że: group oznacza element nadrzędny, a group-hover: / group-focus: stylizują elementy potomne na podstawie stanu elementu nadrzędnego, peer oznacza element sąsiedni, a peer-hover: / peer-focus: / peer-checked: stylizują kolejne elementy sąsiednie na podstawie stanu elementu peer, a nazwane grupy i elementy peer, takie jak group/card i peer/tab, zapobiegają niejednoznaczności w zagnieżdżonych układach lub układach z wieloma elementami peer. Następnie omówimy system responsywnych punktów przerwania Tailwind.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 30
- Lekcje
- 120
Często zadawane pytania
Czy lekcja „Warianty group i peer” jest bezpłatna?
Tak — pełny tekst „Warianty group i peer” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Tailwind CSS Academy, przejdź na CoddyKit PRO. Kurs Tailwind CSS Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Warianty group i peer”?
Używać wzorców group i peer do stylowania elementów potomnych na podstawie stanu elementu nadrzędnego lub sąsiedniego. Ćwiczysz Tailwind CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Tailwind CSS Academy?
Nie wymagamy żadnego doświadczenia. Tailwind CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Warianty group i peer”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Tailwind CSS Academy?
Tak. Każda lekcja Tailwind CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Warianty hover i active
- Warianty focus i focus-visible
- Warianty disabled i placeholder
- Warianty group i peer