Размер шрифта

Применение

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

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

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

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

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

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

Размеры шрифта

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

  // tailwind.config.js
  module.exports = {
    theme: {
      fontSize: {
-       'xs': '.75rem',
-       'sm': '.875rem',
+       'tiny': '.875rem',
        'base': '1rem',
        'lg': '1.125rem',
        'xl': '1.25rem',
        '2xl': '1.5rem',
-       '3xl': '1.875rem',
-       '4xl': '2.25rem',
        '5xl': '3rem',
        '6xl': '4rem',
+       '7xl': '5rem',
      }
    }
  }

Предоставление высоты строки по умолчанию

Вы можете указать высоту строки по умолчанию для каждого размера шрифта, используя кортеж вида [fontSize, lineHeight] в Вашем файле tailwind.config.js.

// tailwind.config.js
module.exports = {
  theme: {
    fontSize: {
      sm: ['14px', '20px'],
      base: ['16px', '24px'],
      lg: ['20px', '28px'],
      xl: ['24px', '32px'],
    }
  }
}

Вы также можете указать высоту строки по умолчанию, используя синтаксис объекта:

// tailwind.config.js
module.exports = {
  theme: {
    fontSize: {
      sm: ['14px', {
        lineHeight: '20px',
      }],
    }
  }
}

Мы уже предоставляем высоту строки по умолчанию для каждого класса .text-{size}.

Предоставление межбуквенного интервала по умолчанию

Если вы также хотите указать значение межбуквенного интервала по умолчанию для размера шрифта, вы можете сделать это, используя кортеж вида [fontSize, { letterSpacing, lineHeight }] в Вашем файле tailwind.config.js.

// tailwind.config.js
module.exports = {
  theme: {
    fontSize: {
      '2xl': ['24px', {
        letterSpacing: '-0.01em',
      }],
      // Или с высотой строки по умолчанию
      '3xl': ['32px', {
        letterSpacing: '-0.02em',
        lineHeight: '40px',
      }],
    }
  }
}

Варианты

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

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

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

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

Отключение

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

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