Адаптивность и состояния
Mobile-first, hover/focus-visible, group/peer, aria-* и container queries.
Обновлено
Что такое варианты
В Tailwind вариант — префикс, который применяет класс только при определённых условиях: на более широком экране (md:), при наведении (hover:), в тёмной теме (dark:), когда родитель в каком-то состоянии (group-hover:). Это аналог media queries и псевдоклассов CSS, записанный прямо на элементе.
<button class="bg-surface hover:bg-hover md:px-6 dark:border-line">| Вид варианта | Примеры | Аналог в CSS |
|---|---|---|
| брейкпоинт | sm: md: lg: max-md: |
@media (min-width: ...) |
| состояние | hover: focus-visible: active: disabled: |
псевдоклассы |
| реляционный | group-hover: peer-checked: has-[img]: |
селекторы родителя / соседа |
| атрибуты | aria-expanded: data-[state=open]: |
селекторы атрибутов |
| окружение | dark: motion-reduce: print: |
media queries настроек |
| контейнер | @md: |
@container |
Варианты можно комбинировать: md:hover:bg-hover.
Mobile-first
Класс без префикса = все экраны. Префикс = начиная с этого брейкпоинта и выше.
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4">| Префикс | Минимальная ширина |
|---|---|
sm: |
40rem (640px) |
md: |
48rem (768px) |
lg: |
64rem (1024px) |
xl: |
80rem (1280px) |
Думайте так: пишете мобильную версию, затем добавляете то, что меняется на больших экранах. max-md: = только ниже md.
Состояния
<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: вместо focus: — кольцо появляется только при работе с клавиатуры, а не при клике.
group и peer
Стилизуете ребёнка по состоянию родителя (group) или соседа (peer):
<a class="group">
<h3 class="group-hover:text-blue-600">Заголовок</h3>
</a>
<input class="peer" type="checkbox" />
<span class="peer-checked:line-through">Задача</span>Атрибуты ARIA и data-*
<button aria-expanded="true" class="aria-expanded:rotate-180">
<div data-state="open" class="data-[state=open]:block hidden">Идеально для headless-компонентов (Radix, React Aria), которые ставят эти атрибуты.
Container queries
Адаптивность по ширине родителя, а не экрана — идеально для карточек, которые используются в разных местах:
<div class="@container">
<div class="flex flex-col @md:flex-row">...</div>
</div>Коротко
- Вариант = условный префикс; без префикса = все экраны.
- Mobile-first: пишете для мобильного, добавляете
md:,lg:для больших экранов. focus-visible:для фокуса;group-*/peer-*для связей;@containerдля компонентов.