Font Size

    Utilities for controlling the font size of an element.

    Show all classes

    Control the font size of an element using the utilities.

    Setting the line-height

    Set an element’s line-height at the same time you set the font size by adding a line-height modifier to any font size utility. For example, use text-xl/8 to set a font size of 1.25rem with a line-height of 2rem.

    Font Size - 图2

    1. <p class="text-base/6 ...">So I started to walk into the water...</p>
    2. <p class="text-base/7 ...">So I started to walk into the water...</p>
    3. <p class="text-base/loose ...">So I started to walk into the water...</p>
    1. <p class="text-sm/[17px] ..."></p>

    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.

    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.

    1. <p class="text-sm md:text-base">
    2. </p>

    To learn more, check out the documentation on Responsive Design, and other media query modifiers.

    You can configure your own custom set of font size utilities using the theme.fontSize section of your tailwind.config.js file.

    tailwind.config.js

    1. module.exports = {
    2.   theme: {
    4.       sm: '0.8rem',
    5.       base: '1rem',
    6.       xl: '1.25rem',
    7.       '2xl': '1.563rem',
    8.       '3xl': '1.953rem',
    9.       '4xl': '2.441rem',
    10.       '5xl': '3.052rem',
    11.     }
    12.   }
    13. }

    Providing a default line-height

    Tailwind’s default theme configures a sensible default line-height for each text-{size} utility. You can configure your own default line heights when using custom font sizes by defining each size using a tuple of the form [fontSize, lineHeight] in your tailwind.config.js file.

    tailwind.config.js

    You can also specify a default line height using the object syntax, which allows you to also provide default letter-spacing and font-weight values. You can do this using a tuple of the form [fontSize, { lineHeight?, letterSpacing?, fontWeight? }].

    tailwind.config.js

    1. module.exports = {
    3.       '2xl': ['1.5rem', {
    4.         lineHeight: '2rem',
    5.         letterSpacing: '-0.01em',
    6.         fontWeight: '500',
    7.       }],
    8.       '3xl': ['1.875rem', {
    9.         lineHeight: '2.25rem',
    10.         letterSpacing: '-0.02em',
    11.         fontWeight: '700',
    12.       }],
    13.     }
    14.   }
    15. }

    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.

    1. <p class="text-[14px]">
    2.   <!-- ... -->
    3. </p>

    Learn more about arbitrary value support in the documentation.