Tailwind CSS home page
Tailwind CSS on GitHub

字体大小

用来控制元素字体大小的功能类

Default class reference

Class
Properties
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;

用法

使用 text-{size} 功能类控制元素的字体大小。

xs
The quick brown fox jumped over the lazy dog.
sm
The quick brown fox jumped over the lazy dog.
base
The quick brown fox jumped over the lazy dog.
lg
The quick brown fox jumped over the lazy dog.
xl
The quick brown fox jumped over the lazy dog.
2xl
The quick brown fox jumped over the lazy dog.
3xl
The quick brown fox jumped over the lazy dog.
4xl
The quick brown fox jumped over the lazy dog.
5xl
The quick brown fox jumped over the lazy dog.
6xl
The quick brown fox jumped over the lazy dog.
7xl
The quick brown fox jumped over the lazy dog.
8xl
The quick brown fox jumped over the lazy dog.
9xl
The quick brown fox jumped 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>

响应式

要在特定的断点处控制元素的字体大小，可在任何现有的字体大小功能类前添加 {screen}: 前缀。例如，使用 md:text-lg 来仅在中等及以上尺寸的屏幕应用 text-lg 功能类。

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

关于 Tailwind 的响应式设计功能的更多信息，请查看 响应式设计 文档。

定制

字体大小

默认情况下，Tailwind 提供了 10 个 font-size 功能类。您可以通过编辑您的 Tailwind 配置中的 theme.fontSize 部分来改变、添加或删除这些功能类。

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

提供默认行高

您可以在您的 tailwind.config.js 文件中使用 [fontSize, lineHeight] 形式的元组为您的每个字体大小提供一个默认的行高。

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

我们已经为每个 .text-{size} 类提供了默认的行高。

提供默认字母间距

如果您还想为字体大小提供一个默认的字母间距值，您可以在您的 tailwind.config.js 文件中使用 [fontSize, { letterSpacing, lineHeight }] 这样的元组来实现。

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

变体

默认情况下， 针对 text sizing 功能类，只生成 responsive 变体。

您可以通过修改您的 tailwind.config.js 文件中的 variants 部分中的 fontSize 属性来控制为 text sizing 功能生成哪些变体。

例如，这个配置也将生成 hover and focus 变体:

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

禁用

如果您不打算在您的项目中使用 text sizing 功能，您可以通过在配置文件的 corePlugins 部分将 fontSize property to false in the corePlugins section of your config file:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     fontSize: false,
    }
  }
字体序列字体平滑度