Tailwind animate-spin移动端失效求助（React+GitHub Pages部署）

• 确保Tailwind动画类被正确打包
  生产构建时Tailwind的JIT模式可能会移除未被静态检测到的类，若你是动态添加animate-spin（比如条件渲染），需在tailwind.config.js中将其加入安全名单：

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    content: ["./src/**/*.{js,jsx,ts,tsx}"],
    safelist: ['animate-spin'],
    theme: { extend: {} },
    plugins: [],
  }
  

  重新构建后部署到GitHub Pages验证效果。

• 手动设置SVG组的transform-origin
  移动端浏览器对SVG元素的默认变换原点可能和桌面端不同，导致动画看似静止。直接给目标<g>元素添加样式：

  <g className="animate-spin" style={{ transformOrigin: 'center center' }}>
    {/* 你的SVG路径内容 */}
  </g>
  

  也可在Tailwind配置中扩展自定义类复用：

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        transformOrigin: {
          'svg-center': 'center center',
        },
      },
    },
  }
  

  使用时改为<g className="animate-spin origin-svg-center">...</g>

• 替换为自定义CSS动画
  若Tailwind内置动画存在移动端兼容性问题，直接编写自定义动画：
  在全局CSS文件（如src/index.css）中添加：

  @keyframes svg-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); } /* 对应逆时针旋转需求 */
  }
  
  .svg-animate-spin {
    animation: svg-spin 2s linear infinite;
    transform-origin: center;
  }
  

  之后将SVG组的animate-spin类替换为svg-animate-spin。

• 清除移动端缓存
  部署后移动端可能加载旧缓存，尝试长按浏览器刷新按钮触发强制刷新（安卓），或下拉页面刷新（iOS），也可在GitHub Pages设置中重新触发部署。

• 检查SVG结构合法性
  确保SVG标签包含正确的命名空间，组元素嵌套无误：

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <g className="animate-spin">
      <!-- 路径内容 -->
    </g>
  </svg>
  

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