Оформление текста

Подчеркивание

Используйте утилиту underline для подчеркивания текста.

Линия, проходящая через

Используйте утилиту line-through, чтобы зачеркнуть текст.

Без подчеркивания

Используйте утилиту no-underline, чтобы удалить подчеркивание или сквозной стиль.

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

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

<p class="no-underline md:underline ...">
  Быстрая, коричневая лиса, перепрыгнула через ленивого пса.
</p>

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

Наведение

Чтобы управлять оформлением текста элемента при наведении, добавьте hover: к любой существующей утилите оформления текста. Например, используйте hover:underline, чтобы применить утилиту underline при наведении курсора.

Утилиты Наведения также можно комбинировать с адаптивными утилитами, добавляя префикс {screen}: перед префиксом hover:.

<a href="#" class="... md:no-underline md:hover:underline ...">Ссылка</a>

Фокус

Чтобы управлять оформлением текста элемента в фокусе, добавьте префикс focus: к любой существующей утилите оформления текста. Например, используйте focus:underline, чтобы применить утилиту underline к фокусу.

Утилиты Фокуса также можно комбинировать с адаптивными утилитами, добавляя префикс {screen}: перед префиксом focus:.

<input class="md:focus:underline ..." value="Focus me">

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

Варианты

По умолчанию, только responsive, group-hover, focus-within, hover и focus варианты создаются для утилит text decoration.

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

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

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

Отключение

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

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