Как сделать текст невыбираемым в Tailwind CSS: методы и примеры

Чтобы сделать текст недоступным для выбора в CSS Tailwind и включить пользовательский выбор, вы можете использовать различные служебные классы и собственный CSS. Вот несколько методов, которые вы можете попробовать:

Метод 1: использование свойства user-select.
Вы можете напрямую использовать свойство CSS user-selectдля управления выделением текста. В CSS Tailwind вы можете применить это свойство с помощью служебного класса select-none. Вот пример:

<p class="select-none">This text cannot be selected.</p>

Метод 2: создание пользовательского служебного класса
Если вы хотите создать собственный служебный класс для невыбираемого текста, вы можете определить его в конфигурации CSS Tailwind. Откройте файл tailwind.config.jsи добавьте следующий код:

module.exports = {
  theme: {
    extend: {
      typography: {
        'non-selectable': {
          css: {
            userSelect: 'none',
          },
        },
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

После добавления пользовательского класса вы можете использовать его в своем HTML следующим образом:

<p class="non-selectable">This text cannot be selected.</p>

Метод 3: встроенные стили.
Если вы предпочитаете встроенные стили, вы можете использовать атрибут style, чтобы напрямую применить свойство user-select: none. Вот пример:

<p >This text cannot be selected.</p>