如何在Tailwind CLI中创建自定义字体工具类？

别担心，这事儿其实挺简单的，我一步步给你捋清楚：

1. 生成Tailwind配置文件 #

你现在还没有tailwind.config.js对吧？直接在项目根目录下运行下面的CLI命令就能生成：

npx tailwindcss init

这个命令会创建一个最小化的配置文件，刚好够用。

2. 配置自定义字体工具类 #

打开刚生成的tailwind.config.js，找到theme对象，扩展它的fontFamily属性，把Montserrat加进去。比如：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,js}", // 这里要确保匹配你项目里的文件路径，根据实际情况调整
  ],
  theme: {
    extend: {
      fontFamily: {
        montserrat: ['Montserrat', 'sans-serif'],
      },
    },
  },
  plugins: [],
}

这里的'Montserrat'就是你要使用的字体名称，后面的sans-serif是 fallback 字体，防止Montserrat加载失败时显示系统默认无衬线字体。

3. 确保字体已引入 #

别忘了先把Montserrat字体引入到你的项目里，常见的方式有两种：

• 在CSS文件开头用@import引入：

  @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
  

• 或者在HTML的<head>里加<link>标签引入。

4. 使用自定义工具类 #

现在你就可以直接用font-montserrat这个工具类啦：

<div class="font-montserrat">Text</div>

最后记得重新启动Tailwind CLI的构建命令，让配置生效哦～

内容来源于stack exchange