Tailwind CSS V4 SVG 完整教程 + 可运行 Demo

前言

SVG 是矢量图形，放大不会模糊，在网页里常用来做图标、Logo、装饰图形。在 Tailwind CSS V4 中，我们可以直接使用工具类控制内联 SVG 的颜色、尺寸、描边、填充、动画交互，不需要修改 SVG 内部代码。

和 V3 相比，V4 对 SVG 相关工具类底层做了优化，支持任意值语法，和状态变体（hover: / active:）、transform、transition 无缝组合；同时可以直接用颜色工具类控制 stroke、fill，写法更统一。

重要提示：只有内联SVG（直接写在HTML里的<svg>标签）才能直接用Tailwind工具类控制；如果是<img src="icon.svg">引入的SVG图片，CSS无法修改内部填充与描边。

一、核心 SVG 工具类

1. fill 填充颜色

控制SVG内部图形填充色。

• fill-{color}：设置填充色
• fill-none：无填充，只保留描边（线性图标常用）
  示例：fill-blue-500、fill-red-500/60

2. stroke 描边颜色

控制线条颜色

• stroke-{color}：描边颜色
• stroke-none：取消描边

3. stroke-width 描边粗细

控制线条粗细
stroke-1、stroke-2、stroke-[1.5px]（方括号任意值，V4支持）

4. stroke-linecap 端点样式

控制线条两端的形状

• stroke-linecap-round：线条端点圆角（图标常用）
• stroke-linecap-square：方形端点
• stroke-linecap-butt：默认平直端点

5. stroke-linejoin 转角样式

线条拐角样式

• stroke-linejoin-round：拐角圆角
• stroke-linejoin-miter：尖角（默认）
• stroke-linejoin-bevel：斜切转角

6. 尺寸控制

直接用宽高工具类控制SVG整体大小：w-6 h-6、w-8 h-8，也支持任意值 w-[48px] h-[48px]

7. 其他常用SVG属性工具类

• stroke-dasharray：虚线，stroke-dasharray-2
• stroke-dashoffset：虚线偏移，常用来做路径动画
• preserve-aspect-{value}：控制SVG缩放对齐方式

二、配合交互与变换（重点）

SVG可以直接使用 hover:、active:、transition、transform，和普通HTML元素用法完全一致。

<!-- hover切换填充色+旋转图标 -->
<svg class="w-8 h-8 fill-slate-600 transition-transform duration-300 hover:fill-blue-500 hover:rotate-180">
  <path d="M12 5l7 7-7 7M5 12h14"/>
</svg>

三、V4自定义SVG相关样式（@theme）

如果需要自定义SVG描边宽度、自定义颜色，在V4中使用@theme注册。

<style type="text/tailwindcss">
@theme {
  --stroke-width-icon: 1.5px;
}
</style>
<svg class="w-8 h-8 stroke-slate-700 stroke-[var(--stroke-width-icon)] fill-none">
  <path d="M6 12h12M12 6v12"/>
</svg>

四、常见业务场景

1. 线性图标：fill-none + 设置stroke，适合菜单、按钮图标
2. 实心图标：直接设置fill填充色
3. 图标交互动画：hover切换颜色、旋转、缩放
4. 路径描边动画：配合stroke-dasharray做画线动画

五、避坑指南

1. ❌ <img src="icon.svg"> 方式引入SVG，无法通过tailwind修改fill/stroke，必须用内联SVG。
2. 很多下载的SVG自带内部fill、stroke属性，会覆盖外部Tailwind样式，需要删掉svg内部自带的fill/stroke。
3. 线性图标优先设置 fill-none，否则会被黑色填充盖住线条。
4. SVG宽高建议成对设置w-* h-*，保持图形比例不变。
5. 任意值语法 stroke-[1.5px] V4原生支持，适合UI图标常用的1.5px描边。

六、完整可运行 Demo（Tailwind CSS V4）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind CSS V4 SVG Demo</title>
  <!-- V4 Play CDN -->
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
  <style type="text/tailwindcss">
    @theme {
      --stroke-width-custom: 1.5px;
    }
  </style>
</head>
<body class="p-10 bg-slate-100 space-y-8">
  <h1 class="text-3xl font-bold text-slate-800">Tailwind CSS V4 SVG 矢量图演示</h1>

  <!-- 1. 实心图标：fill填充，hover变色 -->
  <div class="flex items-center gap-3">
    <p class="w-40 text-slate-600">1. 实心填充图标</p>
    <svg class="w-8 h-8 fill-slate-600 transition-colors duration-200 hover:fill-rose-500 cursor-pointer" viewBox="0 0 24 24">
      <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
    </svg>
    <span class="text-slate-500">hover变红</span>
  </div>

  <!-- 2. 线性图标：fill-none + stroke描边，圆角端点 -->
  <div class="flex items-center gap-3">
    <p class="w-40 text-slate-600">2. 线性描边图标</p>
    <svg class="w-8 h-8 fill-none stroke-slate-600 stroke-2 stroke-linecap-round stroke-linejoin-round transition-colors duration-200 hover:stroke-blue-500 cursor-pointer" viewBox="0 0 24 24">
      <path d="M9 18l6-6-6-6"/>
    </svg>
    <span class="text-slate-500">hover切换描边颜色</span>
  </div>

  <!-- 3. 自定义描边宽度（使用@theme变量） -->
  <div class="flex items-center gap-3">
    <p class="w-40 text-slate-600">3. @theme自定义描边</p>
    <svg class="w-8 h-8 fill-none stroke-indigo-500 stroke-[var(--stroke-width-custom)] stroke-linecap-round" viewBox="0 0 24 24">
      <path d="M6 12h12M12 6v12"/>
    </svg>
    <span class="text-slate-500">1.5px描边</span>
  </div>

  <!-- 4. SVG搭配transform旋转动画 -->
  <div class="flex items-center gap-3">
    <p class="w-40 text-slate-600">4. SVG旋转交互</p>
    <svg class="w-8 h-8 fill-none stroke-amber-500 stroke-2 stroke-linecap-round transition-transform duration-300 hover:rotate-180 cursor-pointer" viewBox="0 0 24 24">
      <path d="M4 12h16M12 4v16"/>
    </svg>
    <span class="text-slate-500">hover旋转180°</span>
  </div>

  <!-- 5. 虚线描边 -->
  <div class="flex items-center gap-3">
    <p class="w-40 text-slate-600">5. 虚线描边SVG</p>
    <svg class="w-12 h-12 fill-none stroke-emerald-500 stroke-2 stroke-dasharray-4" viewBox="0 0 24 24">
      <circle cx="12" cy="12" r="9"/>
    </svg>
    <span class="text-slate-500">虚线圆环</span>
  </div>

  <!-- 6. 按钮内嵌入SVG图标 -->
  <div class="flex items-center gap-3">
    <p class="w-40 text-slate-600">6. 按钮内嵌图标</p>
    <button class="inline-flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded-lg transition duration-200 hover:bg-blue-600 active:scale-95">
      <svg class="w-5 h-5 fill-none stroke-white stroke-2 stroke-linecap-round" viewBox="0 0 24 24">
        <path d="M5 12h14M12 5v14"/>
      </svg>
      添加
    </button>
  </div>

</body>
</html>

全文总结

Tailwind CSS V4 操作SVG的核心思路：使用内联SVG，移除SVG标签内部自带fill/stroke属性，通过外部Tailwind工具类控制填充、描边、粗细、端点样式。
SVG可以和hover、active、transition、transform等交互变换工具类自由组合，轻松实现图标变色、旋转、缩放等交互动画。自定义SVG样式使用V4标准@theme语法注册变量，兼顾复用性与Tree-shaking。

Tailwind CSS V4 SVG 速查表

说明：仅适用于内联SVG（直接写在HTML的<svg>标签）；<img src="xxx.svg">引入的SVG无法使用下面工具类修改填充/描边。
要点：SVG内部代码里要删掉自带的 fill=""、stroke=""，否则会覆盖Tailwind样式；可与 hover:/active:/focus:、transform、transition 组合。

一、填充 fill

示例：fill-slate-600、fill-rose-500/70

二、描边 stroke

示例：stroke-slate-700、stroke-emerald-500

三、描边粗细 stroke-width

四、线条端点与拐角

五、虚线描边

六、SVG尺寸控制

直接使用通用宽高工具类

<svg class="w-6 h-6">...</svg>
<svg class="w-[48px] h-[48px]">...</svg>

七、V4 @theme 自定义SVG变量（标准写法）

<style type="text/tailwindcss">
@theme {
  --stroke-width-icon: 1.5px;
}
</style>
<!-- 使用 -->
<svg class="w-8 h-8 fill-none stroke-slate-700 stroke-[var(--stroke-width-icon)] stroke-linecap-round">
  <path d="M6 12h12M12 6v12"/>
</svg>

八、高频业务代码片段（直接复制）

<!-- 1. 实心图标，hover变色 -->
<svg class="w-8 h-8 fill-slate-600 transition-colors duration-200 hover:fill-rose-500 cursor-pointer" viewBox="0 0 24 24">
  <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
</svg><!-- 2. 线性图标（推荐模板） -->
<svg class="w-8 h-8 fill-none stroke-slate-600 stroke-2 stroke-linecap-round stroke-linejoin-round transition-colors duration-200 hover:stroke-blue-500 cursor-pointer" viewBox="0 0 24 24">
  <path d="M9 18l6-6-6-6"/>
</svg>
<!-- 3. SVG 旋转交互 -->
<svg class="w-8 h-8 fill-none stroke-amber-500 stroke-2 stroke-linecap-round transition-transform duration-300 hover:rotate-180 cursor-pointer" viewBox="0 0 24 24">
  <path d="M4 12h16M12 4v16"/>
</svg>
<!-- 4. 按钮内嵌图标 -->
<button class="inline-flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded-lg transition duration-200 hover:bg-blue-600 active:scale-95">
  <svg class="w-5 h-5 fill-none stroke-white stroke-2 stroke-linecap-round" viewBox="0 0 24 24">
    <path d="M5 12h14M12 5v14"/>
  </svg>
  添加
</button>

九、避坑清单

1. ❌ <img src="icon.svg"> 引入的SVG，CSS无法修改fill/stroke，必须使用内联SVG。
2. 从图标网站下载的SVG，内部自带 fill、stroke 属性，要删除，否则外部Tailwind样式不生效。
3. 线性图标务必加上 fill-none，否则图形会被填充色块盖住线条。
4. 图标优先成对设置 w-* h-*，保证图形比例不变形。
5. 图标描边1.5px是UI常用尺寸，用方括号语法 stroke-[1.5px] 快速实现。

速记口诀

内联SVG才可控，内部fill要删掉；
fill填充stroke线，round端点图标好看；
hover变色加旋转，搭配transition丝滑；
自定义变量@theme，1.5px描边最常用。