如何在TailwindCSS中拉伸SVG以匹配标题宽度？

1. 让SVG支持伸缩 #

编辑你的SVG文件，修改根<svg>标签的属性，确保它能随容器宽度自适应拉伸：

<!-- 修改后的SVG示例 -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 6" width="100%" height="auto">
  <!-- 你的装饰图形代码，比如波浪线、下划线等 -->
</svg>

• viewBox：定义图形的原始坐标范围（前两个值是起始点，后两个是宽高），保留这个属性能保证拉伸时图形比例正确。
• width="100%"：让SVG宽度跟随父容器自动调整。
• height="auto"：保持图形的原始高宽比，避免拉伸变形。

2. 调整Tailwind CSS类，让伪元素匹配标题宽度 #

首先给标题容器（比如<h2>或包裹标题的<span>）加上相对定位，确保伪元素能基于它定位：

<h2 class="relative inline-block">我的标题</h2>

然后修改伪元素的Tailwind类，让装饰元素完全匹配标题宽度：

<h2 class="relative inline-block after:absolute after:left-0 after:bottom-[-10px] after:w-full after:h-5 after:bg-[url('../public/svg/underline-large.svg')] after:bg-cover after:bg-center">
  我的标题
</h2>

关键属性说明：

• after:w-full：让伪元素宽度和标题容器完全一致。
• after:bg-cover：让SVG背景拉伸填满伪元素的宽高（配合SVG本身的可伸缩属性，不会出现变形）。
• after:absolute + after:left-0 + after:bottom-[]：精准定位装饰元素在标题下方的位置。

备选方案：无缝重复SVG（适合可平铺的装饰） #

如果你的装饰元素是可以无缝重复的样式（比如虚线、小图案），可以不用修改SVG，直接调整背景属性：

<span class="relative inline-block after:absolute after:left-0 after:bottom-[-8px] after:w-full after:h-5 after:bg-[url('../public/svg/underline-large.svg')] after:bg-repeat-x after:bg-center">
  我的标题
</span>

after:bg-repeat-x会让SVG横向重复铺满整个标题宽度，适合本身支持无缝拼接的装饰图形。

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