如何在Tailwind CSS v4中创建配置

背景

我正在尝试在Tailwind CSS v4中创建自定义动画。我被困住了,因为 tailwind.config.js 这个顺风版本不推荐使用该文件,我找不到替代方案。
例如,我想要一个自定义动画,我在网上找到了 this animation 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中获得相同的结果?我不理解将js配置文件转换为Tailwind v4语法的一般规则。

我发现了什么

在我找到的文件上 how to force Tailwind v4 to use tailwind.config.js ,但这是一种遗留方法,也排除了一些功能。由于我是从头开始构建一个网站,我认为我不必采用已弃用的操作。

我看到了关于这个主题的其他答案,但没有人解释如何从js-config传递到Tailwind v4 config。例如,在 this answer 只解释了如何实现仅翻译该段代码,但这还不足以实现我的目标。

我试图在Tailwind v4中翻译我在网上找到的文件,以寻找答案:

@utility keyframes {
    @variant typing {
        
    }
}

@utility animation {
    @variant typing {

    }
}

但我仍然卡住了,因为我不知道如何翻译一些js文件切片,如下所示:

// ...
    typing: {
        "0%": // ...

转换为Tailwind v4语法。