Выравнивание текста

Применение

Управляйте выравниванием текста элемента с помощью утилит .text-left, .text-center, .text-right и .text-justify.

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

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

<p class="text-left md:text-center ...">Lorem ipsum dolor sit amet ...</p>

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

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

Варианты

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

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

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

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

Отключение

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

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