解决 Tailwind CSS 无法使用自定义字重的问题

在使用 Tailwind CSS 进行前端开发时，我们可能会遇到一些无法使用自定义字重的问题。这是因为 Tailwind CSS 中默认只提供了一些常用的字重（如 normal、bold、semibold 等），而没有提供更细致的字重设置。但是，我们可以通过一些方法来解决这个问题。

解决方法

方法一：使用插件

Tailwind CSS 提供了一些插件来扩展其功能，其中就包括字重插件。我们可以通过安装这个插件来使用更细致的字重设置。

首先，在项目中安装 tailwindcss-font-weight 插件：

npm install tailwindcss-font-weight

然后，在 tailwind.config.js 文件中引入插件并进行配置：

// javascriptcn.com 代码示例
// tailwind.config.js
module.exports = {
  // ...
  plugins: [
    require('tailwindcss-font-weight'),
  ],
  theme: {
    // ...
    fontWeight: {
      100: '100',
      200: '200',
      300: '300',
      400: '400',
      500: '500',
      600: '600',
      700: '700',
      800: '800',
      900: '900',
    },
  },
};

配置完成后，我们就可以在 HTML 或 CSS 中使用自定义的字重了：

<p class="font-medium">Medium</p>
<p class="font-800">Extra Bold</p>

方法二：手动配置

如果不想使用插件，我们也可以手动配置 Tailwind CSS 的字重设置。首先，在 tailwind.config.js 文件中找到 fontWeight 配置项，然后手动添加需要的字重：

// javascriptcn.com 代码示例
// tailwind.config.js
module.exports = {
  // ...
  theme: {
    // ...
    fontWeight: {
      'thin': '100',
      'extralight': '200',
      'light': '300',
      'normal': '400',
      'medium': '500',
      'semibold': '600',
      'bold': '700',
      'extrabold': '800',
      'black': '900',
    },
  },
};

配置完成后，我们就可以在 HTML 或 CSS 中使用自定义的字重了：

<p class="font-medium">Medium</p>
<p class="font-extrabold">Extra Bold</p>

总结

解决 Tailwind CSS 无法使用自定义字重的问题，我们可以使用插件或手动配置。插件使用简单，但需要安装并进行配置；手动配置需要我们手动添加需要的字重，但不需要安装插件。无论使用哪种方法，都可以让我们更细致地设置字重，从而达到更好的视觉效果。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656ad2b2d2f5e1655d340482