Pseudo class-ek és state-ek

Hover

<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg">
  Hover: sötétebb kék
</button>

<a class="text-blue-600 hover:text-blue-800 hover:underline">
  Link hover
</a>

Focus

<input
  class="border border-gray-300 rounded-lg px-3 py-2
         focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
  placeholder="E-mail cím"
/>

Active

<button class="bg-blue-500 hover:bg-blue-600 active:bg-blue-700 px-4 py-2">
  Kattintáskor sötétebb
</button>

Disabled

<button
  disabled
  class="bg-blue-500 text-white px-4 py-2 rounded-lg
         disabled:opacity-50 disabled:cursor-not-allowed"
>
  Inaktív gomb
</button>

First, Last, Odd, Even (listaelemekhez)

<ul>
  <li class="border-b border-gray-200 last:border-b-0 py-3">
    <!-- Az utolsó elemnél nincs alsó border -->
    Listaelem
  </li>
</ul>

<table>
  <tr class="odd:bg-gray-50 even:bg-white">
    <!-- Zebra csíkos táblázat -->
  </tr>
</table>

Group – szülőelem hover-re reagáló gyerekek

A group pattern lehetővé teszi, hogy egy szülő hover-je gyerekek stílusát is megváltoztassa:

<div class="group flex items-center gap-3 p-4 rounded-lg hover:bg-gray-50 cursor-pointer">
  <div class="w-10 h-10 bg-gray-200 rounded-full group-hover:bg-blue-100">
    <!-- Szülő hover-re megváltozik a gyerek is -->
  </div>
  <div>
    <p class="font-medium text-gray-900">Felhasználó neve</p>
    <p class="text-sm text-gray-500 group-hover:text-blue-500">
      részletek
    </p>
  </div>
  <svg class="ml-auto opacity-0 group-hover:opacity-100 transition-opacity">
    <!-- A nyíl csak hoverre jelenik meg -->
  </svg>
</div>

Peer – testvér elem állapotára reagálás

A peer akkor hasznos, ha egy checkbox vagy input állapota alapján változtatnál más elemet:

<label class="flex items-center gap-2 cursor-pointer">
  <input type="checkbox" class="peer hidden" />
  <div class="w-5 h-5 rounded border-2 border-gray-300 
              peer-checked:bg-blue-500 peer-checked:border-blue-500">
    <!-- Bejelölt állapotban kék -->
  </div>
  <span class="peer-checked:text-blue-600 peer-checked:font-medium">
    Elfogadom a feltételeket
  </span>
</label>

Transitions

Az animált átmenetekhez a transition utility-t add hozzá:

<button class="bg-blue-500 hover:bg-blue-600 transition-colors duration-200 ease-in-out">
  Simán változik a szín
</button>

<div class="opacity-0 hover:opacity-100 transition-opacity duration-300">
  Simán jelenik meg
</div>

<!-- Mindent animál -->
<div class="transition-all duration-300">...</div>

Összefoglaló

A hover:, focus:, active: prefix-ek rendkívül egyszerűvé teszik az interaktív stílusokat – nincs szükség külön CSS szelektorokra. A group és peer pattern a haladóbb Tailwind használat sarokkövei: szülő-gyerek és testvér alapú interakciókhoz nélkülözhetetlenek.

Pseudo class-ek és state-ek

On this page