Утилиты для управления возможностью выделения пользователем текста в элементе.
Используйте select-none, чтобы предотвратить выделение текста в элементе и его дочерних элементах.
<div class="select-none ...">
Этот текст нельзя выбрать
</div>Используйте select-text, чтобы разрешить выделение текста в элементе и его дочерних элементах.
<div class="select-text ...">
Этот текст можно выбрать
</div>Используйте select-all, чтобы автоматически выделять весь текст в элементе, когда пользователь щелкает мышью.
<div class="select-all ...">
Щелкните в любом месте этого текста, чтобы выделить все
</div>Используйте select-auto, чтобы использовать поведение браузера по умолчанию для выделения текста. Полезно для отмены других классов, таких как .select-none, в разных контрольных точках.
<div class="select-auto ...">
Этот текст можно выбрать
</div>По умолчанию, только responsive варианты создаются для утилит user-select.
Вы можете контролировать, какие варианты создаются для утилит user-select для изменения свойства userSelect в разделе variants Вашего файла конфигурации tailwind.config.js.
Например, эта конфигурация также будет генерировать варианты hover и focus:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ userSelect: ['hover', 'focus'],
}
}
}Если Вы не планируете использовать в своем проекте утилиты для изменения user-select, Вы можете полностью отключить их, установив для userSelect свойство значение false в разделе corePlugins Вашего файла конфигурации:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ userSelect: false,
}
}