## Accordion ```html

``` `group` на батьківському елементі - не на button, якщо діти реагують на `aria-expanded` батька. --- ## Card з `has-*` ```html

Pro Plan

For growing projects

``` --- ## Markdown content ```html

``` --- ## Коли що використовувати | Потреба | Інструмент | | --- | --- | | Стан самого елемента | `hover:`, `focus:`, `aria-*`, `data-*` | | Стан батька → дитина | `group-*` | | Стан input → наступний sibling | `peer-*` | | Батько залежить від дитини | `has-*` | | Конкретні діти | `[&>li]:...`, `[&_a]:...`, `*:`, `**:` | | Чужа HTML | arbitrary variants | | Повторюваний selector | `@custom-variant` | --- ## Типові помилки Забути `&`: ```html

``` Пробіл замість `_`: ```html

``` `group` vs `peer`: ```html

Text

Text ``` Надто складний `className` → `data-state`, `@custom-variant` або компонент. --- ## Міні-завдання Card з: `has-[:checked]`, `group-hover`, `[&_svg]`, `data-[state=active]`, `aria-selected:`. ```html

Advanced Card

Styled with advanced Tailwind selectors.

``` --- ## Підсумок Advanced selectors - майже повноцінний CSS у utility-класах. У проєктах найчастіше: `data-*`, `aria-*`, `group-*`, `peer-*`, `[&_selector]`, `has-*`. Локальна стилізація компонента - так; непереносний «CSS у одному рядку» - ні.

Advanced Selectors in Tailwind

Advanced Selectors in Tailwind