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"，若背景生效但字号无效，说明是字体相关规则被覆盖
