如何让Angular CLI允许Tailwind为public文件夹内的SVG应用样式

问题根源 #

1. Tailwind默认仅扫描src目录下的模板、组件文件，public/asset目录的SVG不在扫描范围内，导致SVG内的Tailwind类无法生成对应的CSS。
2. 通过<img>引用外部SVG时，SVG内部的类仅作用于SVG自身元素，无法控制<img>容器的样式；反之，<img>上的样式会覆盖SVG的尺寸等属性。

可行解决方案 #

方案1：将SVG封装为Angular组件（推荐） #

这种方式既实现了SVG与UI代码的分离，又能让Tailwind正常扫描到SVG内的样式类，同时方便复用。

1. 移动SVG文件：将SVG文件移至src/assets/svgs目录下（保持与业务代码分离，同时处于Tailwind扫描范围内）。
2. 创建图标组件：为每个常用SVG创建独立组件，示例：

// src/app/components/icons/key-icon.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-key-icon',
  standalone: true,
  template: `
    <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <!-- 粘贴你的SVG内容 -->
      <g stroke-linejoin="round" ...></g>
    </svg>
  `,
  styles: []
})
export class KeyIconComponent {}

3. 复用组件：在需要使用图标的组件中导入并直接使用：

<app-key-icon></app-key-icon>

方案2：让Tailwind扫描public目录的SVG #

如果坚持把SVG放在public目录，可修改Tailwind配置文件，强制扫描该目录下的SVG文件，确保内部的Tailwind类被生成CSS。

修改tailwind.config.js的content数组：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./src/**/*.{html,ts}",
    "./public/svgs/*.svg" // 添加SVG路径
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

注意：此方案仅能让SVG内部元素的Tailwind类生效（比如SVG内部图形的颜色、描边样式），如果要控制整个SVG的尺寸、透明度，仍需在<img>标签上添加样式；若要让SVG自身的类控制容器样式，建议使用内联SVG方式。

方案3：内联SVG到模板 #

使用工具或脚本将SVG内容直接内联到Angular模板中，这样SVG内容处于src目录的模板内，Tailwind能正常扫描到其中的类，样式直接生效。

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