css使用tailwind字体大小类不生效怎么办_检查配置文件和class拼写

Tailwind 字体大小类不生效需排查三处：一是配置中 fontSize 是否被错误覆盖或未继承默认值；二是 HTML 中 class 名拼写是否正确且作用于文本元素；三是 content 路径是否包含当前文件并重启服务。

Tailwind 的字体大小类（如 text-sm、text-lg）不生效，通常不是 CSS 冲突或浏览器问题，而是配置或使用环节出了偏差。重点排查以下三处：

确认 tailwind.config.js 中启用了 fontSize 变量

Tailwind 默认已预设字体大小，但如果你自定义了 theme.extend.fontSize 或清空了 theme.fontSize，又没显式继承默认值，就可能丢失所有 text-* 类。

• 检查配置中是否误写了 fontSize: {} 或 fontSize: undefined
• 若需扩展，推荐用 extend 而非覆盖：
  

  module.exports = {
    theme: {
      extend: {
        fontSize: {
          'xs': '0.75rem',
          'body': '1rem'
        }
      }
    }
  }

• 运行 npx tailwindcss -c tailwind.config.js --watch 确认配置被正确加载（终端无报错）

核对 HTML 中 class 名拼写与作用范围

Tailwind 类名区分大小写、连字符和层级，常见低级错误包括：

• text-sm 写成 text-smm、text_small 或 textSm
• 在未启用 JIT 模式的老版本中，动态拼接的 class（如 class="text-{{ size }}"）不会被扫描生成，需显式写进 content 配置或改用安全值
• 确保 class 真正应用在文本元素上（如

  文字

  ），而非父容器仅设了 font-size 却没传递给子文本

检查 content 配置是否覆盖到当前文件

Tailwind 依赖 content 字段扫描模板中的 class，若路径未包含当前 HTML/JSX 文件，对应类就不会被生成。

• 打开 tailwind.config.js，确认 content 数组包含你的源码路径，例如：
  

  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./public/**/*.html"
  ]

• 修改后重启开发服务器（npm run dev 或 yarn dev），避免缓存导致旧 CSS 生效
• 在浏览器开发者工具中搜索 text-lg，看对应 CSS 规则是否存在；若完全找不到，基本是 content 扫描失败

验证是否被其他样式强制覆盖

即使类生成了，也可能被更高优先级样式压制：

• 打开 DevTools → Elements → 选中文本元素 → 查看右侧面板的 Computed 标签页，定位 font-size 实际值来源
• 注意是否有 !important、内联样式、或更具体的选择器（如 div p { font-size: 12px; }）覆盖了 .text-lg
• 临时加一个明显样式测试：class="text-lg bg-red-200"，若背景生效但字号无效，说明是字体相关规则被覆盖