Утилиты для управления видимостью элемента.
Используйте invisible, чтобы скрыть элемент, но при этом сохраните его место в DOM, влияя на расположение других элементов (сравните с .hidden из документации отображения).
<div class="flex justify-center space-x-4">
<div>1</div>
<div class="invisible ...">2</div>
<div>3</div>
</div>Используйте visible, чтобы сделать элемент видимым. Это в основном полезно для отмены утилиты invisible на экранах разных размеров.
<div class="flex justify-center space-x-4">
<div>1</div>
<div class="visible ...">2</div>
<div>3</div>
</div>Чтобы применить утилиту видимости только к определенной контрольной точке, добавьте префикс {screen}: к существующему имени класса. Например, добавление класса md:invisible к элементу приведет к применению утилиты invisible при средних размерах экрана и выше.
<div class="visible md:invisible ..."></div>Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией Адаптивного дизайна.
По умолчанию, только responsive варианты создаются для утилит visibility.
Вы можете контролировать, какие варианты создаются для утилит visibility для изменения свойства visibility в разделе variants Вашего файла конфигурации tailwind.config.js.
Например, эта конфигурация также будет генерировать варианты hover и focus:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ visibility: ['hover', 'focus'],
}
}
}Если Вы не планируете использовать в своем проекте утилиты для изменения visibility, Вы можете полностью отключить их, установив для visibility свойство значение false в разделе corePlugins Вашего файла конфигурации:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ visibility: false,
}
}