Tailwind RN(twrnc)自定义背景样式失效：tailwind.config配置不生效求助

以下是排查和修复bg-primary-default样式失效的关键步骤：

1. 校验tailwind.config.js的颜色配置 #

确保你在配置文件的theme.extend.colors下正确定义了嵌套的颜色结构，示例代码如下：

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}', // 务必包含使用该样式的组件文件路径
  ],
  theme: {
    extend: {
      colors: {
        primary: {
          default: '#你的颜色值', // 替换为实际的十六进制/颜色变量
        },
      },
    },
  },
  plugins: [],
};

注意：不要直接在theme.colors下定义（会覆盖Tailwind默认颜色体系），必须放在theme.extend.colors中扩展。

2. 确认内容扫描路径正确 #

Tailwind会根据content数组的路径扫描组件文件，只有被扫描到的样式类才会被生成。如果你的组件不在指定路径下，自定义样式不会被打包，导致失效。

3. 重启开发服务器 #

修改tailwind.config.js后，必须重启React Native（或对应框架）的开发服务器，新的配置才能生效。

4. 检查样式类拼写 #

确认代码中的类名是bg-primary-default，没有大小写错误、连字符错位等拼写问题，需与配置中的命名完全一致。

5. 排查样式优先级冲突 #

如果以上步骤都没问题，可通过调试工具查看元素的计算样式，确认是否有内联样式、更高优先级的类覆盖了background-color属性。

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