使用Tailwind CSS调整SVG尺寸失败，求有效解决方法

安全阿岳

2026-7-18

解决Google Symbols SVG无法用Tailwind调整尺寸的问题

问题根源

你设置的text-sm lg:text-2xl是文本字体大小类，SVG默认不会继承这个属性；同时硬编码的width="48"和height="48"会强制固定尺寸，导致Tailwind样式失效。修改viewBox会破坏原有坐标系统，引发显示问题。

两种有效解决方案

方案1：直接用Tailwind尺寸类控制（推荐）

保留Google Symbols原生的viewBox，移除硬编码的width/height，改用Tailwind的w-*和h-*类直接指定尺寸：

<svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 -960 960 960"
    class="w-4 h-4 lg:w-8 lg:h-8"
>
    <path d="M795-120q-122 0-242.5-60T336-336q-96-96-156-216.5T120-795q0-19 13-32t32-13h140q14 0 24.5 9.5T343-805l27 126q2 14-.5 25.5T359-634L259-533q56 93 125.5 162T542-254l95-98q10-11 23-15.5t26-1.5l119 26q15 3 25 15t10 28v135q0 19-13 32t-32 13Z" />
</svg>

w-4 h-4对应text-sm的视觉尺寸，lg:w-8 lg:h-8对应text-2xl，可根据需求调整w-*/h-*的数值。

方案2：让SVG尺寸跟随文本大小

将SVG的width和height设为1em，这样它会继承text-*类的字体大小，实现尺寸随文本缩放：

<svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 -960 960 960"
    width="1em"
    height="1em"
    class="text-sm lg:text-2xl"
>
    <path d="M795-120q-122 0-242.5-60T336-336q-96-96-156-216.5T120-795q0-19 13-32t32-13h140q14 0 24.5 9.5T343-805l27 126q2 14-.5 25.5T359-634L259-533q56 93 125.5 162T542-254l95-98q10-11 23-15.5t26-1.5l119 26q15 3 25 15t10 28v135q0 19-13 32t-32 13Z" />
</svg>