Tailwind CSS字体类生效但边距、边框类不生效是配置错误吗？

问题现象 #

• 基于React + Tailwind CSS 3.x开发时，部分工具类不生效：border-2、border-black、mt-3类已经正确挂载到DOM元素上，但对应边框、外边距样式没有渲染
• 存在部分生效的样式：全局字体被Tailwind默认样式覆盖、text-2xl、border-red-500类可以正常生效
• 已确认类名没有拼写错误，DOM节点上的class属性和代码中写的完全一致

故障根因 #

当前配置存在两个核心问题，直接导致了「部分类生效、部分类失效」的现象：

1. Tailwind内容扫描路径配置不全
2. Create React App（react-scripts）开发环境下样式引入方式错误，手动编译的CSS文件没有被开发服务正确加载

修复步骤 #

按顺序操作即可解决：

1. 修正tailwind.config.js的扫描路径
   你当前的content配置只匹配.html和.js后缀的文件，但项目里的React组件都是.jsx后缀，Tailwind编译时扫描不到这些文件里写的类名，就不会生成对应的CSS规则。把配置改成如下内容，覆盖所有前端文件后缀：

module.exports = {
    content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
    theme: {
        extend: {}
    },
    plugins: []
};

2. 修正Tailwind的引入和编译配置
   你现在手动执行npx tailwindcss -i ./src/index.css -o ./dist/output.css --watch生成样式文件、再在html里用link标签引入的方式，不适用react-scripts的开发模式：react-scripts start启动的开发服务会把所有资源编译到内存中，不会映射根目录下的dist文件夹，开发环境下访问/dist/output.css实际是404状态。你看到的部分生效的样式，是之前某次编译残留的文件被浏览器缓存导致的。
   按如下方式调整配置，让react-scripts自动处理Tailwind编译：

• 打开src/index.css，在文件最顶部加入三个Tailwind核心指令：

@tailwind base;
@tailwind components;
@tailwind utilities;
/* 后方可保留自定义全局样式 */

• 删除index.html里之前加的<link href="/dist/output.css" rel="stylesheet">引入代码
• 在项目根目录（和tailwind.config.js同级）新建postcss.config.js文件，写入如下配置：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

3. 清理缓存重启服务

• 停掉当前正在运行的启动命令，删掉之前手动生成的根目录下的dist文件夹
• 清空浏览器缓存，重新执行npm start启动项目即可

改完之后所有Tailwind类都会被正常扫描、编译、生效，不需要额外加其他特殊配置。

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