React集成Tailwind CSS问题：font-bold生效但text-xl等属性无效

检查Tailwind配置文件（tailwind.config.js） #

确保配置文件中正确指定了React项目的内容路径，Tailwind需要识别哪些文件使用了它的工具类，才能生成对应样式。若路径未覆盖组件文件，仅基础样式（如font-bold）会生效，其他工具类无法被生成。

正确配置示例：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}", // 覆盖所有React组件文件
    "./public/index.html",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

检查全局CSS文件的Tailwind指令 #

确认项目全局CSS文件（如src/index.css或src/App.css）中引入了Tailwind的三个核心指令：

@tailwind base;
@tailwind components;
@tailwind utilities;

缺少这些指令会导致Tailwind工具类（如text-xl）无法加载，仅基础字体样式生效。

重启开发服务器 #

修改配置或CSS文件后，重启React开发服务器（npm start/yarn start），确保新配置生效。

排查样式冲突 #

若项目存在自定义全局样式，可能覆盖了Tailwind的text-xl类。可通过浏览器开发者工具查看元素样式，确认字体大小规则是否被其他样式覆盖。

内容的提问来源于stack exchange，提问作者Mr Ikram