Семейство шрифтов

Sans-serif

Используйте font-sans, чтобы применить семейство веб-безопасных шрифтов без засечек:

Serif

Используйте font-serif, чтобы применить семейство веб-безопасных шрифтов с засечками:

Monospaced

Используйте font-mono для применения семейства веб-безопасных моноширинных шрифтов:

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

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

<p class="font-sans md:font-serif">
  <!-- ... -->
</p>

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

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

Семейства шрифтов

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

  // tailwind.config.js
  module.exports = {
    theme: {
      fontFamily: {
-       'sans': ['ui-sans-serif', 'system-ui', ...],
-       'serif': ['ui-serif', 'Georgia', ...],
-       'mono': ['ui-monospace', 'SFMono-Regular', ...],
+       'display': ['Oswald', ...],
+       'body': ['"Open Sans"', ...],
      }
    }
  }

Семейства шрифтов можно указать как массив или как простую строку с разделителями-запятыми:

{
  // Array format:
  'sans': ['Helvetica', 'Arial', 'sans-serif'],

  // Comma-delimited format:
  'sans': 'Helvetica, Arial, sans-serif',
}

Обратите внимание, что Tailwind не экранирует имена шрифтов автоматически для Вас. Если вы используете шрифт, содержащий недопустимый идентификатор, заключите его в кавычки или экранируйте недопустимые символы.

{
  // Не сработает:
  'sans': ['Exo 2', ...],

  // Добавьте кавычки:
  'sans': ['"Exo 2"', ...],

  // ...или экранируйте из пробела:
  'sans': ['Exo\\ 2', ...],
}

Варианты

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

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

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

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

Отключение

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

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