Tailwind CSS中font-stretch属性的等效实现方法咨询

Tailwind CSS 默认没有内置对应 CSS font-stretch 属性的工具类，你可以通过以下两种方式实现：

1. 自定义工具类 #

在项目的 tailwind.config.js 中扩展主题配置，添加自定义的字体拉伸工具类：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      fontStretch: {
        'ultra-condensed': '50%',
        'extra-condensed': '62.5%',
        condensed: '75%',
        'semi-condensed': '87.5%',
        normal: '100%',
        'semi-expanded': '112.5%',
        expanded: '125%',
        'extra-expanded': '150%',
        'ultra-expanded': '200%',
      },
    },
  },
  plugins: [],
}

配置完成后，就可以像使用内置工具类一样调用，例如：

<p class="font-stretch-condensed"> condensed 文本 </p>
<p class="font-stretch-expanded"> expanded 文本 </p>

2. 使用任意值语法 #

如果你不需要全局复用，也可以直接用 Tailwind 的任意值语法快速实现，支持百分比数值或 CSS 关键字：

<!-- 使用百分比 -->
<p class="font-stretch-[75%]"> condensed 文本 </p>
<!-- 使用 CSS 关键字 -->
<p class="font-stretch-[expanded]"> expanded 文本 </p>

注意：font-stretch 生效的前提是你使用的字体文件支持对应的拉伸变体，否则该属性不会产生视觉变化。

内容的提问来源于stack exchange，提问作者G. Duarte