如何在Tailwind CSS v4中实现自定义动画配置？

问题背景 #

我尝试在Tailwind CSS v4中创建自定义动画，但遇到了瓶颈——该版本弃用了tailwind.config.js配置文件，找不到合适的替代方案。比如我想实现一个打字机动画，之前在v3版本中找到的JS配置是这样的：

tailwind.config = {
    theme: {
      extend: {
        keyframes: {
          typing: {
            "0%": {
              width: "0%",
              visibility: "hidden"
            },
            "100%": {
              width: "100%"
            }
          },
          blink: {
            "50%": {
              borderColor: "transparent"
            },
            "100%": {
              borderColor: "white"
            }
          }
        },
        animation: {
          typing: "typing 2s steps(20) infinite alternate, blink .7s infinite"
        }
      },
    },
    plugins: [],
  }

需求 #

如何在Tailwind v4中实现相同的打字机动画？同时需要了解把v3的JS配置转换为v4语法的通用规则。

已尝试的方案 #

我找到官方文档中强制v4使用tailwind.config.js的遗留方案，但会缺失部分功能，从零搭建的项目不想采用这种弃用操作。也查过相关问题，但大多只讲某段代码的转换，没有通用规则。自己尝试用@utility语法，但不知道怎么把关键帧的具体内容转过去。

解决方案 #

Tailwind v4采用CSS优先的扩展方式，不需要JS配置，直接在CSS文件中通过@layer指令扩展工具类即可。对应上面的打字机动画，写法如下：

@layer utilities {
  /* 定义关键帧 */
  @keyframes typing {
    0% {
      width: 0%;
      visibility: hidden;
    }
    100% {
      width: 100%;
    }
  }

  @keyframes blink {
    50% {
      border-color: transparent;
    }
    100% {
      border-color: white;
    }
  }

  /* 定义动画工具类 */
  .animate-typing {
    animation: typing 2s steps(20) infinite alternate, blink .7s infinite;
  }
}

使用时直接在HTML元素上添加类名：

<div class="animate-typing border-r-2 border-white">Hello World</div>

通用转换规则 #

把v3的JS配置转为v4语法，核心逻辑是把JS里的配置映射到原生CSS的对应写法：

1. 关键帧转换：theme.extend.keyframes中的每个动画名，直接对应CSS的@keyframes 动画名，里面的百分比阶段直接写成CSS的关键帧代码。
2. 动画类转换：theme.extend.animation中的每个键值对，对应一个.animate-{动画名}的工具类，类的内容就是animation: 原配置中的动画字符串。
3. 包裹层：所有自定义的工具类和关键帧都要放在@layer utilities（或components/base，根据需求选择）中，这样Tailwind才能正确识别并处理这些自定义内容。

注意：你之前尝试的@utility语法是错误的，v4中需要用@layer来扩展主题，而非自定义@utility指令。

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