How to create config in Tailwind CSS v4

Context

I am trying to create custom animation in Tailwind CSS v4. I am stuck because the tailwind.config.js file is deprecated by this tailwind version and I don't find out an alternative.
For example, I want a custom animation and I found online this animation in js format:

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: [],
  }

Question

How I can obtain the same result in Tailwind v4? I don't understand the general rule to translate js config files into Tailwind v4 syntax.

What I found

On the documentation I found how to force Tailwind v4 to use tailwind.config.js, but it is a legacy approach which excludes also some functionality. Since I am building a site from scratch, I don't think I have to adopt deprecated operations.

I saw other answer about this topic, but no one of them explain how to pass from js config to Tailwind v4 config. For instance, in this answer is explained only how to achieve the translation of only that piece of code, but it is not enough for what I aim to obtain.

I tried to translate in Tailwind v4 the file I found online looking at that answer:

@utility keyframes {
    @variant typing {
        
    }
}

@utility animation {
    @variant typing {

    }
}

But I still stuck because I don't know how to translate some js file slices like this:

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

into Tailwind v4 syntax.

As per the documentation:

Customizing your theme

Use the --animate-* theme variables to customize the animation utilities in your project:

@theme {
  --animate-wiggle: wiggle 1s ease-in-out infinite;

  @keyframes wiggle {
    0%,
    100% {
      transform: rotate(-3deg);
    }
    50% {
      transform: rotate(3deg);
    }
  }
}

Now the animate-wiggle utility can be used in your markup:

<div class="animate-wiggle">
  <!-- ... -->
</div>

Thus, in the same vein, the animations would be defined in the CSS file like:

@import "tailwindcss";

@theme {
  --animate-typing: typing  2s steps(20) infinite alternate, blink .7s infinite;

  @keyframes typing {
    0% {
      width: 0%;
      visibility: hidden;
    }
    100% {
      width: 100%;
    }
  }
  @keyframes blink {
    50% {
      border-color: transparent;
    }
    100% {
      border-color: white;
    }
  }
}

<script src="https://unpkg.com/@tailwindcss/browser@4.0.8"></script>

<style type="text/tailwindcss">
@theme {
  --animate-typing: typing  2s steps(20) infinite alternate, blink .7s infinite;

  @keyframes typing {
    0% {
      width: 0%;
      visibility: hidden;
    }
    100% {
      width: 100%;
    }
  }
  @keyframes blink {
    50% {
      border-color: transparent;
    }
    100% {
      border-color: white;
    }
  }
}
</style>

<div class="animate-typing h-10 bg-red-500 border-r-10"></div>