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>

響應式

要在特定的斷點處控制元素的字體大小，可在任何現(xiàn)有的字體大小功能類前添加 ?{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',
      }],
    }
  }
}

我們已經(jīng)為每個 ?.text-{size}? 類提供了默認行高。

提供默認字母間距

如果您還想為字體大小提供一個默認的字母間距值，您可以在您的 ?tailwind.config.js? 文件中使用 ?[fontSize, { letterSpacing, lineHeight }]? 這樣的元組來實現(xiàn)。

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