Logo Windi CSS

Варианты

Варианты позволяют указать, при каких обстоятельствах будут активированы ваши утилиты.

Вы можете использовать размер экрана, системную тему или любой псевдоселектор, например, :hover.

Вы указываете вариант, используя разделитель :, и можете комбинировать их произвольно, как в:

sm:bg-red-500 sm:hover:bg-green-300 dark:bg-white

Варианты экрана

Сначала мобильные

ВариантПравилоОписание
sm@media (min-width: 640px)Включить утилиту, когда ширина экрана больше, чем 640px
md@media (min-width: 768px)Включить утилиту, когда ширина экрана больше, чем 768px
lg@media (min-width: 1024px)Включить утилиту, когда ширина экрана больше, чем 1024px
xl@media (min-width: 1280px)Включить утилиту, когда ширина экрана больше, чем 1280px
2xl@media (min-width: 1536px)Включить утилиту, когда ширина экрана больше, чем 1536px

Сначала десктопы

ВариантПравилоОписание
<sm@media (max-width: 640px)Включить утилиту, когда ширина экрана меньше 640px
<md@media (max-width: 768px)Включить утилиту, когда ширина экрана меньше 768px
<lg@media (max-width: 1024px)Включить утилиту, когда ширина экрана меньше 1024px
<xl@media (max-width: 1280px)Включить утилиту, когда ширина экрана меньше 1280px
<2xl@media (max-width: 1536px)Включить утилиту, когда ширина экрана меньше 1536px

Только экран

ВариантПравилоОписание
@sm@media (min-width: 640px) and (max-width: 768px)Включить утилиту, когда ширина экрана больше, чем 640px и меньше 768px
@md@media (min-width: 768px) and (max-width: 1024px)Включить утилиту, когда ширина экрана больше, чем 768px и меньше 1024px
@lg@media (min-width: 1024px) and (max-width: 1280px)Включить утилиту, когда ширина экрана больше, чем 1024px и меньше 1280px
@xl@media (min-width: 1280px) and (max-width: 1536px)Включить утилиту, когда ширина экрана больше, чем 1280px и меньше 1536px
@2xl@media (min-width: 1536px)Включить утилиту, когда ширина экрана больше, чем 1536px

Контрольные точки максимальной ширины

Вы можете определить пользовательские контрольные точки, которые вместо этого используют max-width или диапазоны, используя следующие параметры конфигурации:

export default {
  theme: {
    screens: {
      '2xl': { max: '1535px' },
      'sm': { min: '640px', max: '767px' },
    },
  },
}

Необработанные медиа-запросы

Вы можете определить собственный экран, указав необработанный медиа-запрос в конфигурации:

export default {
  theme: {
    screens: {
      portrait: { raw: '(orientation: portrait)' },
      print: { raw: 'print' },
    },
  },
}

Например, вы можете затем использовать print:hidden, чтобы скрыть элементы при стилизации для печати.

Состояние вариантов

Псевдоклассы

ВариантПравилоОписание
first.${utility}:first { ... }Нацелен на псевдокласс first-child.
last.${utility}:last { ... }Нацелен на псевдокласс last-child.
odd.${utility}:odd { ... }Нацелен на псевдокласс odd-child.
even.${utility}:even { ... }Нацелен на псевдокласс even-child.
visited.${utility}:visited { ... }Нацелен на псевдокласс visited.
checked.${utility}:checked { ... }Нацелен на псевдокласс checked.
focus-within.${utility}:focus-within { ... }Нацелен на псевдокласс focus-within.
hover.${utility}:hover { ... }Нацелен на псевдокласс hover.
focus.${utility}:focus { ... }Нацелен на псевдокласс focus.
focus-visible.${utility}:focus-visible { ... }Нацелен на псевдокласс focus-visible.
active.${utility}:active { ... }Нацелен на псевдокласс active.
link.${utility}:link { ... }Нацелен на псевдокласс link.
target.${utility}:target { ... }Нацелен на псевдокласс target.
not-checked.${utility}:not(:checked) { ... }Нацелен на псевдокласс :not(:checked).
default.${utility}:default { ... }Нацелен на псевдокласс default.
enabled.${utility}:enabled { ... }Нацелен на псевдокласс enabled.
indeterminate.${utility}:indeterminate { ... }Нацелен на псевдокласс indeterminate.
invalid.${utility}:invalid { ... }Нацелен на псевдокласс invalid.
valid.${utility}:valid { ... }Нацелен на псевдокласс valid.
optional.${utility}:optional { ... }Нацелен на псевдокласс optional.
required.${utility}:required { ... }Нацелен на псевдокласс required.
placeholder-shown.${utility}:placeholder-shown { ... }Нацелен на псевдокласс placeholder-shown.
read-only.${utility}:read-only { ... }Нацелен на псевдокласс read-only.
read-write.${utility}:read-write { ... }Нацелен на псевдокласс read-write.
not-disabled.${utility}:not(:disabled) { ... }Нацелен на псевдокласс :not(:disabled).
first-of-type.${utility}:first-of-type { ... }Нацелен на псевдокласс first-of-type.
not-first-of-type.${utility}:not(:first-of-type) { ... }Нацелен на псевдокласс :not(:first-of-type).
last-of-type.${utility}:last-of-type { ... }Нацелен на псевдокласс last-of-type.
not-last-of-type.${utility}:not(:last-of-type) { ... }Нацелен на псевдокласс :not(:last-of-type).
not-first.${utility}:not(:first-child) { ... }Нацелен на псевдокласс not(:first-child).
not-last.${utility}:not(:last-child) { ... }Нацелен на псевдокласс not(:last-child).
only-child.${utility}:only-child { ... }Нацелен на псевдокласс only-child.
not-only-child.${utility}:not(:only-child) { ... }Нацелен на псевдокласс not(:only-child).
only-of-type.${utility}:only-of-type { ... }Нацелен на псевдокласс only-of-type.
not-only-of-type.${utility}:not(:only-of-type) { ... }Нацелен на псевдокласс not(:only-of-type).
even-of-type.${utility}:nth-of-type(even) { ... }Нацелен на псевдокласс nth-of-type(even).
odd-of-type.${utility}:nth-of-type(odd) { ... }Нацелен на псевдокласс nth-of-type(odd).
root.${utility}:root { ... }Нацелен на псевдокласс root.
empty.${utility}:empty { ... }Нацелен на псевдокласс empty.

Псевдоэлементы

ВариантПравилоОписание
before.{utility}::before { ... }Нацелен на псевдоэлемент before.
after.{utility}::after { ... }Нацелен на псевдоэлемент after.
first-letter.{utility}::first-letter { ... }Нацелен на псевдоэлемент first-letter.
first-line.{utility}::first-line { ... }Нацелен на псевдоэлемент first-line.
selection.{utility}::selection { ... }Нацелен на псевдоэлемент selection.

Родительские селекторы

ВариантПравилоОписание
group-hover.group:hover .${utility} { ... }Нацеливается на элемент, когда отмеченный родительский элемент соответствует псевдоклассу hover.
group-focus.group:focus .${utility} { ... }Нацеливается на элемент, когда отмеченный родительский элемент соответствует псевдоклассу focus.
group-active.group:active .${utility} { ... }Нацеливается на элемент, когда отмеченный родительский элемент соответствует псевдоклассу active.
group-visited.group:visited .${utility} { ... }Нацеливается на элемент, когда отмеченный родительский элемент соответствует псевдоклассу visited.

Дочерние селекторы

ВариантПравилоОписание
svg.${utility} svg { ... }Нацеливается на узлы svg.
all.${utility} * { ... }Нацеливается на узлы all.
children.${utility} > * { ... }Нацеливается на узлы children.
siblings.${utility} ~ * { ... }Нацеливается на узлы siblings.
sibling.${utility} + * { ... }Нацеливается на узлы first sibling.

Медиа-запрос

ВариантПравилоОписание
motion-safe@media (prefers-reduced-motion: no-preference) { ... }Нацелен на медиа-запрос prefers-reduced-motion: no-preference.
motion-reduce@media (prefers-reduced-motion: reduce) { ... }Нацелен на медиа-запрос prefers-reduced-motion: reduce.

Тема вариантов

По умолчанию

ВариантПравилоОписание
dark@media (prefers-color-scheme: dark) { ... } or .dark .{utility} { ... }Включить базу утилит в конфигурации пользователя
light@media (prefers-color-scheme: light) { ... } or .light .{utility} { ... }Включить базу утилит в конфигурации пользователя

Следование системе

ВариантПравилоОписание
@dark@media (prefers-color-scheme: dark) { ... }Включить утилиту, когда система включает темный режим
@light@media (prefers-color-scheme: light) { ... }Включить утилиту, когда система включает светлый режим

После применения

ВариантПравилоОписание
.dark.dark .{utility} { ... }Включить базу утилит в темном режиме приложения
.light.light .{utility} { ... }Включить базу утилит в светлом режиме приложения