「及時」模式:全新世代的 Tailwind CSS
Tailwind CSS on GitHub

Font Size

Utilities for controlling the font size of an element.

Default class reference

Class
屬性
text-xsfont-size: 0.75rem; line-height: 1rem;
text-smfont-size: 0.875rem; line-height: 1.25rem;
text-basefont-size: 1rem; line-height: 1.5rem;
text-lgfont-size: 1.125rem; line-height: 1.75rem;
text-xlfont-size: 1.25rem; line-height: 1.75rem;
text-2xlfont-size: 1.5rem; line-height: 2rem;
text-3xlfont-size: 1.875rem; line-height: 2.25rem;
text-4xlfont-size: 2.25rem; line-height: 2.5rem;
text-5xlfont-size: 3rem; line-height: 1;
text-6xlfont-size: 3.75rem; line-height: 1;
text-7xlfont-size: 4.5rem; line-height: 1;
text-8xlfont-size: 6rem; line-height: 1;
text-9xlfont-size: 8rem; line-height: 1;

Usage

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

xs
The quick brown fox jumps over the lazy dog.
sm
The quick brown fox jumps over the lazy dog.
base
The quick brown fox jumps over the lazy dog.
lg
The quick brown fox jumps over the lazy dog.
xl
The quick brown fox jumps over the lazy dog.
2xl
The quick brown fox jumps over the lazy dog.
3xl
The quick brown fox jumps over the lazy dog.
4xl
The quick brown fox jumps over the lazy dog.
5xl
The quick brown fox jumps over the lazy dog.
6xl
The quick brown fox jumps over the lazy dog.
7xl
The quick brown fox jumps over the lazy dog.
8xl
The quick brown fox jumps over the lazy dog.
9xl
The quick brown fox jumps over the lazy dog.
<p class="text-xs ...">The quick brown fox ...</p>
<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>
<p class="text-3xl ...">The quick brown fox ...</p>
<p class="text-4xl ...">The quick brown fox ...</p>
<p class="text-5xl ...">The quick brown fox ...</p>
<p class="text-6xl ...">The quick brown fox ...</p>
<p class="text-7xl ...">The quick brown fox ...</p>
<p class="text-8xl ...">The quick brown fox ...</p>
<p class="text-9xl ...">The quick brown fox ...</p>

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.

<p class="text-base md:text-lg ...">The quick brown fox jumps over the lazy dog.</p>

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

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.

  // 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',
      }
    }
  }

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.

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

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.

// tailwind.config.js
module.exports = {
  theme: {
    fontSize: {
      '2xl': ['24px', {
        letterSpacing: '-0.01em',
      }],
      // Or with a default line-height as well
      '3xl': ['32px', {
        letterSpacing: '-0.02em',
        lineHeight: '40px',
      }],
    }
  }
}

Variants

默認情況下, 只有 響應式 的 text sizing 變化模式 (variants) 會產生。

tailwind.config.jsvariants 區塊中變更 fontSize 屬性來決定有哪些變化模式會生成。

舉個例子來說,這個設定將會生成 響應式 和 hover 的變化模式。

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

Disabling

如果你不打算在專案中使用 text sizing 功能,可以在你的設定檔裡的 corePlugins 屬性中將 fontSize 設定為 false 來停用功能:

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