Толщина шрифта

Применение

Управляйте толщиной шрифта элемента с помощью утилит font-{weight}.

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

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

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

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

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

Веса шрифтов

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

  // tailwind.config.js
  module.exports = {
    theme: {
      fontWeight: {
-       hairline: 100,
+       'extra-light': 100,
-       thin: 200,
        light: 300,
        normal: 400,
        medium: 500,
-       semibold: 600,
        bold: 700,
-       extrabold: 800,
+       'extra-bold': 800,
        black: 900,
      }
    }
  }

Варианты

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

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

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

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

Отключение

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

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