Angular 13中Tailwind自定义brand颜色主题未被识别如何解决

你遇到的样式不生效问题分为两个独立的原因：

• SVG的stroke原生属性赋值"brand"无效：Tailwind中定义的自定义颜色是框架专属的配置，只能用于Tailwind提供的工具类，不会被原生HTML属性识别。你直接写stroke="brand"时，浏览器只会把brand当成原生HTML的颜色关键字，而HTML本身没有名为brand的预设颜色，因此不会生效。
• border-brand类不生效大概率是PurgeCSS摇树优化误删了样式：你当前tailwind.config.js里的purge配置仅配置了扫描.html和.ts后缀的文件，如果你的模板代码写在.vue/.jsx/.tsx等其他后缀的文件中，PurgeCSS会认为border-brand是未使用的样式，在编译时直接删除。如果是开发环境未生效，也可能是修改配置后没有重启Tailwind编译进程导致配置未加载。

• 修正SVG的stroke颜色设置，优先使用Tailwind工具类的方案：
  删除SVG标签上的stroke="brand"原生属性，给svg的class列表添加stroke-brand工具类即可，修改后的代码如下：

<svg fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"
     viewBox="0 0 24 24" class="w-6 h-6 stroke-brand">
  <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>

• 排查border-brand不生效问题：
  1. 调整purge的content配置，把项目中所有用到Tailwind类的文件后缀都加入扫描范围，比如Vue项目添加./src/**/*.vue、React项目添加./src/**/*.{jsx,tsx}，避免样式被误删。参考配置示例：

  purge: {
    enabled: process.env.NODE_ENV === 'production',
    content: [
      "./src/**/*.html",
      "./src/**/*.ts",
      "./src/**/*.vue", // 按需添加对应后缀
    ]
  },
  

  2. 修改配置后必须重启Tailwind的编译进程（比如vite、webpack的devServer），清除浏览器缓存后再验证效果。
  3. 临时把purge的enabled值改为false测试，如果修改后样式生效，即可确认是purge扫描规则的问题，调整content配置即可。

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