Межбуквенное расстояние

Применение

Управляйте межбуквенным интервалом в элементе с помощью утилит tracking-{size}.

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

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

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

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

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

Расстояние между буквами

По умолчанию Tailwind предоставляет шесть утилит для отслеживания. Вы можете изменить, добавить или удалить их, отредактировав раздел theme.letterSpacing в Вашей конфигурации Tailwind.

  // tailwind.config.js
  module.exports = {
    theme: {
      letterSpacing: {
+       tightest: '-.075em',
        tighter: '-.05em',
-       tight: '-.025em',
        normal: '0',
-       wide: '.025em',
        wider: '.05em',
-       widest: '.1em',
+       widest: '.25em',
      }
    }
  }

Варианты

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

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

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

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

Отключение

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

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