Tailwind CSS 字体大小

字体大小

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

用法

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

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

您还可以使用对象语法指定默认行高：

// tailwind.config.js
module.exports = {
  theme: {
    fontSize: {
      sm: ['14px', {
        lineHeight: '20px',
      }],
    }
  }
}

我们已经为每个 ​.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 ​属性设置为 ​false ​来完全禁用它们：

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