Цвет кольца

Применение

Используйте утилиты ring-{color} для установки цвета контура кольца.

Изменение непрозрачности

Вы можете контролировать непрозрачность колец с помощью утилит ring-opacity-{amount}:

Дополнительную информацию смотрите в документации ringOpacity.

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

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

<button class="ring-2 ring-blue-300 md:ring-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,
    }
  }
}

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

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

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

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

Варианты

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

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

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

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

Отключение

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

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