@include('_partials.class-table', [ 'rows' => [ [ '.text-xs', 'font-size: .75rem;', ], [ '.text-sm', 'font-size: .875rem;', ], [ '.text-base', 'font-size: 1rem;', ], [ '.text-lg', 'font-size: 1.125rem;', ], [ '.text-xl', 'font-size: 1.25rem;', ], [ '.text-2xl', 'font-size: 1.5rem;', ], [ '.text-3xl', 'font-size: 1.875rem;', ], [ '.text-4xl', 'font-size: 2.25rem;', ], [ '.text-5xl', 'font-size: 3rem;', ], [ '.text-6xl', 'font-size: 4rem;', ], ] ])

Usage

Control the font size of an element using the .text-{size} utilities.

@component('_partials.code-sample')

.text-xs

The quick brown fox jumped over the lazy dog.

.text-sm

The quick brown fox jumped over the lazy dog.

.text-base

The quick brown fox jumped over the lazy dog.

.text-lg

The quick brown fox jumped over the lazy dog.

.text-xl

The quick brown fox jumped over the lazy dog.

.text-2xl

The quick brown fox jumped over the lazy dog.

.text-3xl

The quick brown fox jumped over the lazy dog.

.text-4xl

The quick brown fox jumped over the lazy dog.

.text-5xl

The quick brown fox jumped over the lazy dog.

.text-6xl

The quick brown fox jumped over the lazy dog.

@slot('code')

The quick brown fox ...

@endslot @endcomponent

Responsive

To control the font size of an element at a specific breakpoint, add a {screen}: prefix to any existing font size utility. For example, use md:text-lg to apply the text-lg utility at only medium screen sizes and above.

For more information about Tailwind's responsive design features, check out the Responsive Design documentation.

@component('_partials.responsive-code-sample', ['class' => 'font-sans']) @slot('none')

The quick brown fox jumped over the lazy dog.

@endslot @slot('sm')

The quick brown fox jumped over the lazy dog.

@endslot @slot('md')

The quick brown fox jumped over the lazy dog.

@endslot @slot('lg')

The quick brown fox jumped over the lazy dog.

@endslot @slot('xl')

The quick brown fox jumped over the lazy dog.

@endslot @slot('code')

The quick brown fox jumped over the lazy dog.

@endslot @endcomponent

Customizing

Font Sizes

By default Tailwind provides 10 font-size utilities. You change, add, or remove these by editing the theme.fontSize section of your Tailwind config.

@component('_partials.customized-config', ['key' => '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', @endcomponent

Providing a default line-heightv1.3.0+

You can provide a default line-height for each of your font-sizes using a tuple of the form [fontSize, lineHeight] in your tailwind.config.js file.

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

We don't do this out-of-the-box for backwards compatibility reasons, but it can be a very convenient customization to make in your own projects

@include('_partials.variants-and-disabling', [ 'utility' => [ 'name' => 'text sizing', 'property' => 'fontSize', ], 'variants' => [ 'responsive', ], ])

Beautiful UI components by the creators of Tailwind CSS.

Learn more →