Tailwind CSS Font Size Classes
Tailwind CSS provides a comprehensive set of utility classes for controlling font sizes in your web projects. These classes allow you to quickly apply consistent typography across your application.
Default Font Size Classes
The following table shows all the default font size utility classes in Tailwind CSS:
| Class | Styles |
|---|---|
text-xs | font-size: var(--text-xs); /_ 0.75rem (12px) / line-height: var(--text-xs--line-height); / calc(1 / 0.75) _/ |
text-sm | font-size: var(--text-sm); /_ 0.875rem (14px) / line-height: var(--text-sm--line-height); / calc(1.25 / 0.875) _/ |
text-base | font-size: var(--text-base); /_ 1rem (16px) / line-height: var(--text-base--line-height); / calc(1.5 / 1) _/ |
text-lg | font-size: var(--text-lg); /_ 1.125rem (18px) / line-height: var(--text-lg--line-height); / calc(1.75 / 1.125) _/ |
text-xl | font-size: var(--text-xl); /_ 1.25rem (20px) / line-height: var(--text-xl--line-height); / calc(1.75 / 1.25) _/ |
text-2xl | font-size: var(--text-2xl); /_ 1.5rem (24px) / line-height: var(--text-2xl--line-height); / calc(2 / 1.5) _/ |
text-3xl | font-size: var(--text-3xl); /_ 1.875rem (30px) / line-height: var(--text-3xl--line-height); / calc(2.25 / 1.875) _/ |
text-4xl | font-size: var(--text-4xl); /_ 2.25rem (36px) / line-height: var(--text-4xl--line-height); / calc(2.5 / 2.25) _/ |
text-5xl | font-size: var(--text-5xl); /_ 3rem (48px) / line-height: var(--text-5xl--line-height); / 1 _/ |
text-6xl | font-size: var(--text-6xl); /_ 3.75rem (60px) / line-height: var(--text-6xl--line-height); / 1 _/ |
text-7xl | font-size: var(--text-7xl); /_ 4.5rem (72px) / line-height: var(--text-7xl--line-height); / 1 _/ |
text-8xl | font-size: var(--text-8xl); /_ 6rem (96px) / line-height: var(--text-8xl--line-height); / 1 _/ |
text-9xl | font-size: var(--text-9xl); /_ 8rem (128px) / line-height: var(--text-9xl--line-height); / 1 _/ |
Custom Font Sizes
Tailwind also provides ways to use custom font sizes:
| Class | Styles |
|---|---|
text-(length:<custom-property>) | font-size: var(<custom-property>); |
text-[<value>] | font-size: <value>; |
Extending the Default Theme in Tailwind CSS v4
Tailwind CSS v4 introduces a powerful new way to extend the default theme using the @theme directive. This allows you to define new theme variables and extend the existing theme directly in your CSS:
/* app.css */
@import 'tailwindcss';
@theme {
--font-script: Great Vibes, cursive;
--text-huge: 10rem; /* 160px */
--text-huge--line-height: 1;
}
This makes new utility classes available that you can use in your HTML:
<!-- Using the custom font family -->
<p class="font-script">This will use the Great Vibes font family.</p>
<!-- Using the custom font size -->
<h1 class="text-huge">Massive Heading</h1>
The @theme directive is one of the most powerful features in Tailwind CSS v4, allowing you to seamlessly extend the default theme without configuration files.