无法覆盖Tailwind CSS默认12px最小字体大小的问题求助

问题原因 #

Tailwind CSS v3及以上版本默认遵循可访问性规范，对字体大小设置了12px的强制最小限制。当你自定义的字体大小低于12px时，生成的CSS会通过min()函数自动把字体大小拉到12px，这就是你配置的text-xxs（10px）不生效的核心原因。

解决方法 #

方法一：自定义字体大小时关闭最小限制 #

在tailwind.config.js里，用对象形式定义字体大小，显式设置minimum: false来禁用默认限制：

module.exports = {
  theme: {
    extend: {
      fontSize: {
        xxs: {
          size: '10px',
          lineHeight: '1.2', // 可根据需求调整行高
          minimum: false // 关键配置：取消最小字体限制
        },
      },
    },
  },
}

方法二：用内联样式或自定义工具类绕过限制 #

如果只是个别地方需要小字体，直接用内联样式更快捷：

<p className="font-[400] md:text-base 3xl:text-[clamp(16px,1vw,32px)]" style={{ fontSize: '10px' }}>
  {title}
</p>

或者通过Tailwind插件添加自定义工具类：

module.exports = {
  theme: {
    extend: {},
  },
  plugins: [
    ({ addUtilities }) => {
      addUtilities({
        '.text-xxs': {
          'font-size': '10px',
          'line-height': '1.2',
        }
      })
    }
  ]
}

注意 #

小于12px的字体可能会降低文本可读性，只建议在非核心文本（比如版权说明、辅助提示）中使用，同时要保证用户能通过浏览器缩放正常阅读内容。

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