Font Size
Utilities for controlling the font size of an element.
Quick reference
Class
|
Properties
|
---|---|
text-xs | font-size: 0.75rem; line-height: 1rem; |
text-sm | font-size: 0.875rem; line-height: 1.25rem; |
text-base | font-size: 1rem; line-height: 1.5rem; |
text-lg | font-size: 1.125rem; line-height: 1.75rem; |
text-xl | font-size: 1.25rem; line-height: 1.75rem; |
text-2xl | font-size: 1.5rem; line-height: 2rem; |
text-3xl | font-size: 1.875rem; line-height: 2.25rem; |
text-4xl | font-size: 2.25rem; line-height: 2.5rem; |
text-5xl | font-size: 3rem; line-height: 1; |
text-6xl | font-size: 3.75rem; line-height: 1; |
text-7xl | font-size: 4.5rem; line-height: 1; |
text-8xl | font-size: 6rem; line-height: 1; |
text-9xl | font-size: 8rem; line-height: 1; |
Basic usage
Setting the font size
Control the font size of an element using the text-{size}
utilities.
<p class="text-sm ...">The quick brown fox ...</p> <p class="text-base ...">The quick brown fox ...</p> <p class="text-lg ...">The quick brown fox ...</p> <p class="text-xl ...">The quick brown fox ...</p> <p class="text-2xl ...">The quick brown fox ...</p>
Applying conditionally
Hover, focus, and other states
Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:text-base
to only apply the text-base
utility on hover.
<p class="text-sm hover:text-base"> <!-- ... --> </p>
For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.
Breakpoints and media queries
You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:text-base
to apply the text-base
utility at only medium screen sizes and above.
<p class="text-sm md:text-base"> <!-- ... --> </p>
To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.
Using custom values
Customizing your theme
By default, Tailwind provides 10 font-size
utilities. You change, add, or remove these by editing the theme.fontSize
section of your Tailwind config.
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', } } }
Learn more about customizing the default theme in the theme customization documentation.
Providing a default line-height
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.
module.exports = { theme: { fontSize: { sm: ['14px', '20px'], base: ['16px', '24px'], lg: ['20px', '28px'], xl: ['24px', '32px'], } } }
You can also specify a default line-height using object syntax:
module.exports = { theme: { fontSize: { sm: ['14px', { lineHeight: '20px', }], } } }
We already provide default line heights for each .text-{size}
class.
Providing a default letter-spacing
If you also want to provide a default letter-spacing value for a font size, you can do so using a tuple of the form [fontSize, { letterSpacing, lineHeight }]
in your tailwind.config.js
file.
module.exports = { theme: { fontSize: { '2xl': ['24px', { letterSpacing: '-0.01em', }], // Or with a default line-height as well '3xl': ['32px', { letterSpacing: '-0.02em', lineHeight: '40px', }], } } }
Arbitrary values
If you need to use a one-off font-size
value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.
<p class="text-[14px]"> <!-- ... --> </p>
Learn more about arbitrary value support in the arbitrary values documentation.
© 2022 Tailwind Labs Inc.
https://tailwindcss.com/docs/font-size