Responsive și stări
Mobile-first, hover/focus-visible, group/peer, aria-* și container queries.
Actualizat
Ce sunt variantele
În Tailwind, o variantă e un prefix care aplică o clasă doar în anumite condiții: pe un ecran mai lat (md:), la hover (hover:), în dark mode (dark:), când părintele e într-o stare (group-hover:). Echivalentul media queries și pseudo-claselor din CSS, scris direct pe element.
<button class="bg-surface hover:bg-hover md:px-6 dark:border-line">| Tip de variantă | Exemple | Echivalent CSS |
|---|---|---|
| breakpoint | sm: md: lg: max-md: |
@media (min-width: ...) |
| stare | hover: focus-visible: active: disabled: |
pseudo-clase |
| relațională | group-hover: peer-checked: has-[img]: |
selectori de părinte / frate |
| atribute | aria-expanded: data-[state=open]: |
selectori de atribut |
| mediu | dark: motion-reduce: print: |
media queries de preferință |
| container | @md: |
@container |
Variantele se pot combina: md:hover:bg-hover.
Mobile-first
Clasa fără prefix = toate ecranele. Prefixul = de la breakpoint-ul acela în sus.
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4">| Prefix | Lățime minimă |
|---|---|
sm: |
40rem (640px) |
md: |
48rem (768px) |
lg: |
64rem (1024px) |
xl: |
80rem (1280px) |
Gândește: scrii versiunea de mobil, apoi adaugi ce se schimbă pe ecrane mari. max-md: = doar sub md.
Stări
<a class="text-muted hover:text-fg focus-visible:outline-2 active:scale-95">
<input class="border invalid:border-red-500 disabled:opacity-50 placeholder:text-gray-400" />
<li class="odd:bg-gray-50 first:pt-0 last:border-0">focus-visible: în loc de focus: — inelul apare doar la tastatură, nu la click.
group și peer
Stilezi un copil după starea părintelui (group) sau a unui frate (peer):
<a class="group">
<h3 class="group-hover:text-blue-600">Titlu</h3>
</a>
<input class="peer" type="checkbox" />
<span class="peer-checked:line-through">Task</span>Atribute ARIA și data-*
<button aria-expanded="true" class="aria-expanded:rotate-180">
<div data-state="open" class="data-[state=open]:block hidden">Perfect cu componente headless (Radix, React Aria) care pun aceste atribute.
Container queries
Responsive după lățimea părintelui, nu a ecranului — ideal pentru carduri refolosite în locuri diferite:
<div class="@container">
<div class="flex flex-col @md:flex-row">...</div>
</div>Pe scurt
- Variantă = prefix condițional; fără prefix = toate ecranele.
- Mobile-first: scrii pentru mobil, adaugi
md:,lg:pentru ecrane mari. focus-visible:pentru focus;group-*/peer-*pentru relații;@containerpentru componente.