Настройка вариантов

Обзор

В разделе variants Вашего файла tailwind.config.js вы определяете, какие варианты должны быть включены для каждого основного плагина:

// tailwind.config.js
module.exports = {
  variants: {
    extend: {
      backgroundColor: ['active'],
      // ...
      borderColor: ['focus-visible', 'first'],
      // ...
      textColor: ['visited'],
    }
  },
}

Каждое свойство - это имя основного плагина, указывающее на массив вариантов, которые нужно сгенерировать для этого плагина.

Из коробки поддерживаются следующие варианты:

Вариант	Описание
`responsive`	Адаптивные варианты, такие как `sm`, `md`, `lg` и `xl`.
`dark`	Нацелен на темный режим.
`motion-safe`	Нацелен на медиа выражение `prefers-reduced-motion: no-preference`.
`motion-reduce`	Нацелен на медиа выражение `prefers-reduced-motion: reduce`.
`first`	Нацелен на псевдокласс `first-child`.
`last`	Нацелен на псевдокласс `last-child`.
`odd`	Нацелен на псевдокласс `odd-child`.
`even`	Нацелен на псевдокласс `even-child`.
`visited`	Нацелен на псевдокласс `visited`.
`checked`	Нацелен на псевдокласс `checked`.
`group-hover`	Нацелен на элемент, когда отмеченный родительский элемент соответствует `hover`.
`group-focus`	Нацелен на элемент, когда отмеченный родительский элемент соответствует `focus`.
`focus-within`	Нацелен на псевдокласс `focus-within`.
`hover`	Нацелен на псевдокласс `hover`.
`focus`	Нацелен на псевдокласс `focus`.
`focus-visible`	Нацелен на псевдокласс `focus-visible`.
`active`	Нацелен на псевдокласс `active`.
`disabled`	Нацелен на псевдокласс `disabled`.

Для получения дополнительной информации о том, как работают варианты, прочтите нашу документацию по адаптивным вариантам, вариантам темного режима и hover, focus и другим вариантам состояния.

Включение дополнительных вариантов

Если вы хотите включить дополнительные варианты для плагина в дополнение к настройкам по умолчанию, вы можете настроить свои варианты с помощью ключевого слова extend, аналогично тому, как вы можете использовать расширение внутри раздела theme:

// tailwind.config.js
module.exports = {
  variants: {
    // "Активный" вариант будет сгенерирован в дополнение к значениям по умолчанию.
    extend: {
      backgroundColor: ['active']
    }
  },
}

Поскольку порядок вариантов важен, любые варианты, добавленные под ключом extend, автоматически упорядочиваются для вас с использованием разумного порядка вариантов по умолчанию. При необходимости вы можете настроить этот порядок с помощью параметра variantOrder.

Переопределение вариантов по умолчанию

Любые варианты, настроенные непосредственно под ключом options, переопределяют варианты по умолчанию для этого подключаемого модуля.

// tailwind.config.js
module.exports = {
  variants: {
    // Будут созданы только "активные" варианты
    backgroundColor: ['active'],
  },
}

При переопределении вариантов по умолчанию убедитесь, что вы всегда указываете все варианты, которые хотите включить, а не только новые, которые вы хотите добавить.

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

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

Например, здесь варианты focus имеют наивысший приоритет для утилит backgroundColor, а варианты hover имеют наивысший приоритет для утилит borderColor:

// tailwind.config.js
module.exports = {
  variants: {
    backgroundColor: ['hover', 'focus'],
    borderColor: ['focus', 'hover'],
  },
}

/* Сгенерированный CSS */

.bg-black { background-color: #000 }
.bg-white { background-color: #fff }
/* ... */

.hover\:bg-black:hover { background-color: #000 }
.hover\:bg-white:hover { background-color: #fff }
/* ... */

.focus\:bg-black:focus { background-color: #000 }
.focus\:bg-white:focus { background-color: #fff }
/* ... */

.border-black { border-color: #000 }
.border-white { border-color: #fff }
/* ... */

.focus\:border-black:focus { border-color: #000 }
.focus\:border-white:focus { border-color: #fff }
/* ... */

.hover\:border-black:hover { border-color: #000 }
.hover\:border-white:hover { border-color: #fff }
/* ... */

Это означает, что с учетом следующего HTML:

<input class="focus:bg-white hover:bg-black focus:border-white hover:border-black">

…если бы вход был завис и одновременно сфокусирован, фон был бы белым, а граница была бы черной.

Создание вариантов таким образом дает вам максимальную гибкость как конечному пользователю, но это также острый инструмент и может иметь непредвиденные последствия, если вы не будете осторожны. Мы рекомендуем включить дополнительные варианты вместо того, чтобы переопределять значения по умолчанию, когда это возможно, и использовать эту функцию только как аварийный выход.

Особые варианты

Отзывчивый

Вариант responsive - это особый случай в Tailwind, и на него не влияет порядок, который вы указываете в конфигурации вариантов.

Это связано с тем, что вариант responsive автоматически складывается с другими вариантами, а это означает, что если вы укажете для утилиты и responsive, и hover варианты , Tailwind также сгенерирует responsive hover варианты:

// tailwind.config.js
module.exports = {
  variants: {
    backgroundColor: ['responsive', 'hover'],
    borderColor: ['responsive', 'focus'],
  },
}

Адаптивные варианты сгруппированы вместе и вставлены в конец Вашей таблицы стилей по умолчанию, чтобы избежать проблем со специфичностью, независимо от того, где в Вашем списке variants появляется responsive.

Если вы по какой-либо причине хотите настроить это поведение, вы можете использовать директиву @tailwind screens, чтобы указать, где должны быть вставлены адаптивные варианты.

Темный, с защитой от движения и с уменьшением движения

Варианты dark, motion-safe и motion-reduce также складываются с другими вариантами, но, в отличие от responsive, они складываются в один и тот же «слот», так что вы можете комбинировать их как с responsive, так и с варианты простых состояний, но не друг с другом.

Порядок этих вариантов имеет значение относительно друг друга, но не относительно других вариантов. Практически невозможно представить себе ситуацию, в которой они могли бы конфликтовать друг с другом на практике, так что это в любом случае не является проблемой.

Вы можете включать эти варианты в любом порядке в конфигурацию variants и никогда не замечать разницы.

По умолчанию

Вы можете использовать специальный вариант DEFAULT , чтобы указать, где генерируется обычная версия утилиты без префикса по сравнению с другими вариантами.

Это расширенная функция, которая действительно полезна только в том случае, если у вас есть собственный вариант (например, children в приведенном ниже примере), который должен иметь более низкий приоритет, чем обычная версия утилиты.

// tailwind.config.js
module.exports = {
  variants: {
    backgroundColor: ['children', 'DEFAULT', 'hover', 'focus'],
  },
}

/* Generated CSS */

.children\:bg-black > * { background-color: #000; }
.children\:bg-white > * { background-color: #fff; }

.bg-black { background-color: #000 }
.bg-white { background-color: #fff }
/* ... */

.hover\:bg-black:hover { background-color: #000 }
.hover\:bg-white:hover { background-color: #fff }
/* ... */

.focus\:bg-black:focus { background-color: #000 }
.focus\:bg-white:focus { background-color: #fff }
/* ... */

Дополнительные сведения о создании пользовательских вариантов смотрите в документации по подключаемым модулям вариантов.

Использование пользовательских вариантов

Если вы написали или установили плагин, который добавляет новый вариант, вы можете включить этот вариант, включив его в конфигурацию вариантов, как если бы это был встроенный вариант.

Например, плагин tailwindcss-interaction-variants добавляет вариант с group-disabled (среди прочего):

// tailwind.config.js
{
  variants: {
    backgroundColor: ['responsive', 'hover', 'focus', 'group-disabled'],
  },
  plugins: [
    require('tailwindcss-interaction-variants'),
  ],
}

Заказ нестандартных вариантов

Если вы хотите указать позицию сортировки по умолчанию для настраиваемого варианта, переопределите свой вариант variantOrder, чтобы включить настраиваемый вариант:

// tailwind.config.js
module.exports = {
  // ...
  variantOrder: [
    'first',
    'last',
    'odd',
    'even',
    'visited',
    'checked',
    'group-hover',
    'group-focus',
    'focus-within',
    'hover',
    'focus',
    'focus-visible',
    'active',
    'group-disabled', // Custom variant
    'disabled',
  ],
  variants: {
    extend: {
      backgroundColor: ['group-disabled'],
    }
  }
}

вам нужно будет указать весь список при переопределении variantOrder, чтобы включить любые пользовательские варианты.

Ссылка на варианты по умолчанию

Вот полный справочник по конфигурации вариантов Tailwind по умолчанию, который может быть полезен, если вы хотите добавить новый вариант с сохранением значений по умолчанию.

// Default configuration
module.exports = {
  // ...
  variants: {
    accessibility: ['responsive', 'focus-within', 'focus'],
    alignContent: ['responsive'],
    alignItems: ['responsive'],
    alignSelf: ['responsive'],
    animation: ['responsive'],
    appearance: ['responsive'],
    backdropBlur: ['responsive'],
    backdropBrightness: ['responsive'],
    backdropContrast: ['responsive'],
    backdropFilter: ['responsive'],
    backdropGrayscale: ['responsive'],
    backdropHueRotate: ['responsive'],
    backdropInvert: ['responsive'],
    backdropOpacity: ['responsive'],
    backdropSaturate: ['responsive'],
    backdropSepia: ['responsive'],
    backgroundAttachment: ['responsive'],
    backgroundBlendMode: ['responsive'],
    backgroundClip: ['responsive'],
    backgroundColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
    backgroundImage: ['responsive'],
    backgroundOpacity: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
    backgroundPosition: ['responsive'],
    backgroundRepeat: ['responsive'],
    backgroundSize: ['responsive'],
    backgroundOrigin: ['responsive'],
    blur: ['responsive'],
    borderCollapse: ['responsive'],
    borderColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
    borderOpacity: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
    borderRadius: ['responsive'],
    borderStyle: ['responsive'],
    borderWidth: ['responsive'],
    boxDecorationBreak: ['responsive'],
    boxShadow: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
    boxSizing: ['responsive'],
    brightness: ['responsive'],
    clear: ['responsive'],
    container: ['responsive'],
    contrast: ['responsive'],
    cursor: ['responsive'],
    display: ['responsive'],
    divideColor: ['responsive', 'dark'],
    divideOpacity: ['responsive', 'dark'],
    divideStyle: ['responsive'],
    divideWidth: ['responsive'],
    dropShadow: ['responsive'],
    fill: ['responsive'],
    filter: ['responsive'],
    flex: ['responsive'],
    flexDirection: ['responsive'],
    flexGrow: ['responsive'],
    flexShrink: ['responsive'],
    flexWrap: ['responsive'],
    float: ['responsive'],
    fontFamily: ['responsive'],
    fontSize: ['responsive'],
    fontSmoothing: ['responsive'],
    fontStyle: ['responsive'],
    fontVariantNumeric: ['responsive'],
    fontWeight: ['responsive'],
    gap: ['responsive'],
    gradientColorStops: ['responsive', 'dark', 'hover', 'focus'],
    grayscale: ['responsive'],
    gridAutoColumns: ['responsive'],
    gridAutoFlow: ['responsive'],
    gridAutoRows: ['responsive'],
    gridColumn: ['responsive'],
    gridColumnEnd: ['responsive'],
    gridColumnStart: ['responsive'],
    gridRow: ['responsive'],
    gridRowEnd: ['responsive'],
    gridRowStart: ['responsive'],
    gridTemplateColumns: ['responsive'],
    gridTemplateRows: ['responsive'],
    height: ['responsive'],
    hueRotate: ['responsive'],
    inset: ['responsive'],
    invert: ['responsive'],
    isolation: ['responsive'],
    justifyContent: ['responsive'],
    justifyItems: ['responsive'],
    justifySelf: ['responsive'],
    letterSpacing: ['responsive'],
    lineHeight: ['responsive'],
    listStylePosition: ['responsive'],
    listStyleType: ['responsive'],
    margin: ['responsive'],
    maxHeight: ['responsive'],
    maxWidth: ['responsive'],
    minHeight: ['responsive'],
    minWidth: ['responsive'],
    mixBlendMode: ['responsive'],
    objectFit: ['responsive'],
    objectPosition: ['responsive'],
    opacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
    order: ['responsive'],
    outline: ['responsive', 'focus-within', 'focus'],
    overflow: ['responsive'],
    overscrollBehavior: ['responsive'],
    padding: ['responsive'],
    placeContent: ['responsive'],
    placeItems: ['responsive'],
    placeSelf: ['responsive'],
    placeholderColor: ['responsive', 'dark', 'focus'],
    placeholderOpacity: ['responsive', 'dark', 'focus'],
    pointerEvents: ['responsive'],
    position: ['responsive'],
    resize: ['responsive'],
    ringColor: ['responsive', 'dark', 'focus-within', 'focus'],
    ringOffsetColor: ['responsive', 'dark', 'focus-within', 'focus'],
    ringOffsetWidth: ['responsive', 'focus-within', 'focus'],
    ringOpacity: ['responsive', 'dark', 'focus-within', 'focus'],
    ringWidth: ['responsive', 'focus-within', 'focus'],
    rotate: ['responsive', 'hover', 'focus'],
    saturate: ['responsive'],
    scale: ['responsive', 'hover', 'focus'],
    sepia: ['responsive'],
    skew: ['responsive', 'hover', 'focus'],
    space: ['responsive'],
    stroke: ['responsive'],
    strokeWidth: ['responsive'],
    tableLayout: ['responsive'],
    textAlign: ['responsive'],
    textColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
    textDecoration: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
    textOpacity: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
    textOverflow: ['responsive'],
    textTransform: ['responsive'],
    transform: ['responsive'],
    transformOrigin: ['responsive'],
    transitionDelay: ['responsive'],
    transitionDuration: ['responsive'],
    transitionProperty: ['responsive'],
    transitionTimingFunction: ['responsive'],
    translate: ['responsive', 'hover', 'focus'],
    userSelect: ['responsive'],
    verticalAlign: ['responsive'],
    visibility: ['responsive'],
    whitespace: ['responsive'],
    width: ['responsive'],
    wordBreak: ['responsive'],
    zIndex: ['responsive', 'focus-within', 'focus']
  }
}