如何在React项目中全局配置Tailwind CSS实现字体响应式缩放？

当然可以实现，直接在Tailwind的配置文件里自定义字号，结合响应式断点就能覆盖默认规则。

1. 修改Tailwind配置文件 #

找到项目里的 tailwind.config.js（没有的话就新建），在 theme.extend.fontSize 里给 sm 字号添加2xl断点的专属配置：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}", // 根据你的项目文件路径调整
  ],
  theme: {
    extend: {
      fontSize: {
        sm: [
          '0.875rem', // 小屏幕下的默认text-sm字号
          { lineHeight: '1.25rem' }, // 可选：配套行高，可按需修改
        ],
        // 针对2xl及以上屏幕的配置
        '2xl': {
          sm: [
            '1rem', // 2xl屏幕以上时text-sm的字号
            { lineHeight: '1.5rem' },
          ],
        },
      },
    },
  },
  plugins: [],
}

2. 验证效果 #

配置完重启项目后，只要组件里用了 text-sm 类，当屏幕宽度达到2xl的默认阈值（1536px）及以上时，字体就会自动变成1rem，小屏幕则保持原来的0.875rem。

额外提示 #

• 要是想给其他断点（比如xl、lg）改字号，照着这个格式在 fontSize 里加对应断点的配置就行。
• 行高可以根据设计需求调整，也可以直接删掉，用Tailwind的默认行高。
• 务必确认 content 字段里的路径包含了所有用到Tailwind类的文件，不然自定义样式可能不生效。

内容的提问来源于stack exchange，提问作者kingkobain99