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

# css  # html  # js  # npm  # 浏览器  # 工具  # ai  # win  # 配置文件  # red  # yarn  # 继承  # class 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 独立制作一个网站多少钱,建立网站需要花多少钱？  Laravel的.env文件有什么用_Laravel环境变量配置与管理详解  企业在线网站设计制作流程,想建设一个属于自己的企业网站，该如何去做？  如何挑选最适合建站的高性能VPS主机？  原生JS获取元素集合的子元素宽度实例  Python数据仓库与ETL构建实战_Airflow调度流程详解  微信小程序 配置文件详细介绍  在线ppt制作网站有哪些软件,如何把网页的内容做成ppt？  微信小程序 wx.uploadFile无法上传解决办法  Laravel如何实现数据导出到CSV文件_Laravel原生流式输出大数据量CSV【方案】  如何用花生壳三步快速搭建专属网站？  Laravel定时任务怎么设置_Laravel Crontab调度器配置  Laravel怎么定时执行任务_Laravel任务调度器Schedule配置与Cron设置【教程】  Laravel如何使用Gate和Policy进行授权？（权限控制）  javascript基本数据类型及类型检测常用方法小结  如何用y主机助手快速搭建网站？  大同网页,大同瑞慈医院官网？  Win11摄像头无法使用怎么办_Win11相机隐私权限开启教程【详解】  Laravel任务队列怎么用_Laravel Queues异步处理任务提升应用性能  laravel怎么通过契约（Contracts）编程_laravel契约（Contracts）编程方法  nodejs redis 发布订阅机制封装实现方法及实例代码  如何用5美元大硬盘VPS安全高效搭建个人网站？  谷歌Google入口永久地址_Google搜索引擎官网首页永久入口  大连网站制作公司哪家好一点,大连买房网站哪个好？  Laravel安装步骤详细教程_Laravel环境搭建指南  如何挑选优质建站一级代理提升网站排名？  laravel怎么为API路由添加签名中间件保护_laravel API路由签名中间件保护方法  制作企业网站建设方案,怎样建设一个公司网站？  微信小程序 input输入框控件详解及实例（多种示例）  如何自定义建站之星模板颜色并下载新样式？  Laravel Livewire是什么_使用Laravel Livewire构建动态前端界面  实现点击下箭头变上箭头来回切换的两种方法【推荐】  如何为不同团队 ID 动态生成多个非值班状态按钮  ChatGPT怎么生成Excel公式_ChatGPT公式生成方法【指南】  北京网页设计制作网站有哪些,继续教育自动播放怎么设置？  济南网站建设制作公司,室内设计网站一般都有哪些功能？  jQuery 常见小例汇总  Android GridView 滑动条设置一直显示状态(推荐)  小米17系列还有一款新机？主打6.9英寸大直屏和旗舰级影像  bootstrap日历插件datetimepicker使用方法  bing浏览器学术搜索入口_bing学术文献检索地址  JS实现鼠标移上去显示图片或微信二维码  制作网站软件推荐手机版,如何制作属于自己的手机网站app应用？  作用域操作符会触发自动加载吗_php类自动加载机制与::调用【教程】  非常酷的网站设计制作软件,酷培ai教育官方网站？  Windows家庭版如何开启组策略(gpedit.msc)？（安装方法）  Laravel如何实现本地化和多语言支持？（i18n教程）  Laravel如何集成Inertia.js与Vue/React？（安装配置）  网站优化排名时，需要考虑哪些问题呢？  Laravel如何实现API速率限制？（Rate Limiting教程）