text-blue-500对SVG无效的根本原因是SVG未内联或被内联fill/width/height覆盖，或通过<img>引入导致currentColor失效；必须内联SVG、清除所有内联样式、保留viewBox，并用fill="currentColor"配合父级text类透传颜色。
直接用 text- 类控制颜色、w-/h- 类控制尺寸，只在 SVG 内联且未带内联 fill 或固定 width/height 时才可靠；否则会失效或失真。
为什么 text-blue-500 有时对 SVG 没反应
根本原因不是 Tailwind 失效，而是 SVG 渲染链被卡住：fill="currentColor" 没写，或写了但被内联 fill="#000" 覆盖，或 SVG 是 <img src="icon.svg"> 引入——后者完全脱离 CSS 控制。
- 确保 SVG 是内联写法：
<svg><path></path></svg>，不是<img>或 background-image - 删掉 SVG 源码里所有
fill、stroke、width、height属性（包括根<svg>标签上的） - 在
<svg>标签上显式加fill="currentColor"，或用 CSS 写svg path { fill: currentColor; } - 父容器加
text-blue-500，颜色才会透传到路径
w-5 h-5 缩放 SVG 时为何变形或模糊
因为 w-5 h-5 只设盒模型尺寸，不保证宽高比；若 SVG 缺少 viewBox 或存在硬编码 width/height，浏览器会拉伸或光栅化。
- 必须保留
viewBox="0 0 24 24"（数值按原始设计定），且移除所有width/height属性 - 优先用
w-5 h-5配合viewBox，它等价于width: 1.25rem; height: 1.25rem;，保持矢量清晰 - 避免混用
scale()或transform：它不改变盒模型，margin和点击热区仍按原始尺寸算 - 如需响应式缩放，改用
clamp(1rem, 2.5vw, 1.75rem)，并配对设置width和height
如何让 SVG 在深色模式下自动换色
Tailwind 的 dark: 前缀本身不作用于 SVG 颜色，必须靠 currentColor + 父级文本色联动，或 CSS 变量接管。
立即学习“前端免费学习笔记（深入）”；
- 写法一（推荐）：
<button class="text-gray-700 dark:text-yellow-300"><svg fill="currentColor">...</svg></button> - 写法二（更灵活）：定义
--icon-fill变量，.icon path { fill: var(--icon-fill); }，再通过.theme-dark .icon { --icon-fill: #9ca3af; }切换 - 禁用
filter: invert()：容易过曝、发灰，且无法精确控制单个图层颜色 - 不要给
<svg>单独写dark:fill-white—— Tailwind 不生成该规则
自定义颜色和描边粗细怎么进 Tailwind 工具类
默认 Tailwind 不支持 fill-brand-500 或 stroke-1.5，需手动扩展配置，否则编译后无对应 CSS 规则。
- 颜色：在
tailwind.config.js中用theme.extend.fill，而非theme.colors—— 后者会清空默认色盘 - 描边：
theme.extend.strokeWidth添加'1.5': '1.5'，再启用stroke-[1.5]（需开启experimental.optimizeUniversalDefaults: true） - 别试图用
border模拟描边：它是盒模型边框，会撑开布局、无法随 viewBox 缩放 - 所有自定义值必须用字符串键名，如
'500': '#3b82f6'，不能写500: '#3b82f6'
最易被忽略的点：SVG 是否真正内联、是否清除了所有内联样式、viewBox 是否存在且正确——这三个条件缺一不可，否则后续所有 CSS 控制都只是在调试无效路径。
