tailwind 默认不提供 stroke-dasharray/dashoffset 工具类，也不内置 svg 路径动画关键帧；必须手动注册 @keyframes 并在 tailwind.config.js 中扩展 animation 才能生效。

为什么直接用 Tailwind 的 animate- 类对 SVG 路径无效

Tailwind 默认不提供任何与 stroke-dasharray 或 stroke-dashoffset 相关的工具类，也不内置 SVG 路径动画的关键帧。你写 animate-pulse 或 animate-bounce，它只作用于 opacity、transform 等通用属性，对描边“生长”毫无反应——因为那需要精确控制路径长度和偏移量，而 Tailwind 不知道你的路径有多长。

必须手动注册 @keyframes 并扩展 theme.extend.animation

核心动作是两步：先在 CSS 中定义关键帧，再在 tailwind.config.js 里把它们映射成可用的类名。不能跳过任一环节，否则类名不生效或动画卡住起点。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 在 src/styles.css（或全局 CSS）中写：

  @keyframes draw-path {
    to { stroke-dashoffset: 0; }
  }

• 在 tailwind.config.js 的 theme.extend 下添加：

  animation: {
    'svg-draw': 'draw-path 0.8s ease-out forwards',
  },

• 确保路径已设好基础样式：stroke、fill="none"、stroke-width，且是内联 SVG（不是 <img src="...">）

路径长度必须用 getTotalLength() 算，不能硬编码或目测

描边动画是否从头开始、是否完整显示，完全取决于 stroke-dasharray 和初始 stroke-dashoffset 是否等于路径真实长度。设计工具导出的 SVG 常含 <g transform></g> 或缩放，会导致 getTotalLength() 返回 0 或错误值。

• 用浏览器控制台临时验证：document.querySelector('path').getTotalLength() —— 如果返回 0，说明路径被包裹或未渲染完成
• 推荐先用 SVGOMG 清理 SVG，删掉无用 <g></g>、width/height 属性，保留干净的 <path d="..."></path>
• 初始样式必须显式设置：style="stroke-dasharray: 137; stroke-dashoffset: 137;"（137 替换为你的实际长度），仅靠 class 触发动画会闪一下才开始

多个路径如何分段触发动画

复杂图标（如带箭头+圆圈+文字路径）需要错开时间，否则全挤在一起。Tailwind 不支持给单个 class 加 animation-delay 参数，得靠额外 class 或内联 style 控制。

• 给每条 <path></path> 分别加 class，比如 class="path-1 path-2 path-3"
• 在 CSS 中单独写延迟：

  .path-1 { animation-delay: 0s; }
  .path-2 { animation-delay: 0.2s; }
  .path-3 { animation-delay: 0.4s; }

• 或直接用内联 style：style="animation-delay: 0.3s"，更灵活，也避免污染全局 CSS
• 注意：所有路径必须共用同一套 stroke-dasharray 值（各自长度），但 stroke-dashoffset 初始值要各自设为自己的长度

路径总长算不准、关键帧没注册进 Tailwind、SVG 不是内联格式——这三个点只要漏一个，动画就停在起点不动。别指望“加个 animate-svg-draw 就完事”，它只是最后一环。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！