如何根据屏幕尺寸修改TailwindCSS字体类的rem值？

我需要让TailwindCSS的默认字体大小类（如text-base）根据屏幕尺寸自动切换对应rem值：比如text-base在≥320px的屏幕上为1.125rem，在≥1200px的大屏上为1.25rem。但尝试了以下配置后并未生效：

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "./app/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        OS: "'Open Sans', sans-serif",
      },
      screens: {
        xs: {
          fontSize: {
            xs: "2rem",
            sm: "5rem",
            base: "1.125rem",
            lg: "2rem",
            xl: "3rem",
            "2xl": "4rem",
            "3xl": "5rem",
          },
        },
        sm: {
          fontSize: {
            xs: "0.875rem",
            sm: "1rem",
            base: "4rem",
            lg: "57rem",
            xl: "5rem",
            "2xl": "10rem",
            "3xl": "2.5rem",
          },
        },
      },
    },
  },
  plugins: [],
}

问题根源 #

你的配置错误在于将fontSize嵌套到了screens节点下——screens仅用于定义屏幕断点的名称和对应宽度，不能直接嵌套字体大小这类主题属性，因此配置不会被Tailwind解析生效。

正确实现方案 #

在theme.extend.fontSize中，为每个字体大小类定义响应式的多屏幕适配值，即可实现自动切换效果：

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "./app/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    // 自定义所需的屏幕断点（按需添加，可保留默认断点如sm、md等）
    screens: {
      xs: '320px',
      xl: '1200px',
    },
    extend: {
      fontFamily: {
        OS: "'Open Sans', sans-serif",
      },
      fontSize: {
        // text-base的多屏幕适配
        base: {
          xs: '1.125rem',  // 屏幕≥320px时使用该值
          xl: '1.25rem'    // 屏幕≥1200px时覆盖为该值
        },
        // 其他字体类同理配置，比如text-sm
        sm: {
          xs: '0.875rem',
          xl: '1rem'
        }
      }
    },
  },
  plugins: [],
}

效果说明 #

上述配置会生成对应的CSS规则：

.text-base {
  font-size: 1.125rem;
}

@media (min-width: 1200px) {
  .text-base {
    font-size: 1.25rem;
  }
}

使用时只需添加text-base类，无需额外的屏幕前缀，字体大小会自动根据当前屏幕尺寸切换。如果需要更精细的断点控制，可继续在字体大小的对象中添加sm、md等更多屏幕断点。

内容的提问来源于stack exchange，提问作者Eric Edward Kunzel