Цвет смещения кольца

Применение

Используйте утилиты ring-offset-{color}, чтобы изменить цвет смещения кольца. Обычно это делается, чтобы попытаться сопоставить смещение с родительским цветом фона, поскольку истинные смещения тени блока фактически невозможны в CSS.

Адаптивность

Чтобы управлять цветом смещения кольца в определенной контрольной точке, добавьте префикс {screen}: к любой существующей утилите цвета смещения кольца. Например, используйте md:ring-offset-blue-500, чтобы применить утилиту ring-offset-blue-500 только при средних размерах экрана и выше.

<button class="ring-2 ring-offset-2 ring-offset-blue-300 md:ring-offset-blue-500">
  <!-- ... -->
</button>

Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией Адаптивного дизайна.

Кастомизация

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

// tailwind.config.js
const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      gray: colors.blueGray,
      indigo: colors.indigo,
      red: colors.rose,
      yellow: colors.yellow,
    }
  }
}

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

// tailwind.config.js
const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    ringOffsetColor: {
      white: colors.white,
      pink: colors.fuchsia,
    }
  }
}

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

Варианты

По умолчанию, только responsive, темный режим (если включен), focus-within и focus варианты создаются для утилит ring offset color.

Вы можете контролировать, какие варианты создаются для утилит ring offset color для изменения свойства ringOffsetColor в разделе variants Вашего файла конфигурации tailwind.config.js.

Например, эта конфигурация также будет генерировать варианты hover и active:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       ringOffsetColor: ['hover', 'active'],
      }
    }
  }

Отключение

Если Вы не планируете использовать в своем проекте утилиты для изменения ring offset color, Вы можете полностью отключить их, установив для ringOffsetColor свойство значение false в разделе corePlugins Вашего файла конфигурации:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     ringOffsetColor: false,
    }
  }