Преобразование текста

Нормальный регистр

Используйте утилиту normal-case, чтобы сохранить исходный корпус. Обычно это используется для сброса заглавных букв в разных контрольных точках.

Верхний регистр

Используйте утилиту uppercase для текста в верхнем регистре.

Строчные буквы

Используйте утилиту lowercase для текста в нижнем регистре.

Заглавные буквы

Используйте утилиту capitalize для написания текста с заглавной буквы.

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

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

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

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

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

Варианты

По умолчанию, только responsive варианты создаются для утилит text transformation.

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

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

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

Отключение

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

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