Correct Way to Add Custom Animation with Plugins

[Kynson]

Hello,

I am trying to add a custom animation with plugin. My goal is to create something that is flexible enough so I can control the timing and duration with css variables. I came up with the following (basically copying from #12056):

// Assume other utilities for the css variables are defined 
matchComponents(
      {
        'animate-typewriter': () => {
          return [
            {
              '@keyframes typewriter': {
                from: {
                  width: 'calc(var(--animate-typewriter-start) * 1ch)',
                },
                to: {
                  width: 'calc(var(--animate-typewriter-end) * 1ch)',
                },
              },
            },
            {
              animation: '1s ease-in-out typewriter',
            },
          ];
        },
      },
      { values: { DEFAULT: '' } },
    );

This seems to work as Tailwind is able to generate the correct CSS for me. Yet, typescript is complaining about the types (it does not expect us to return an array):

Type '({ '@keyframes typewritter': { from: { width: string; }; to: { width: string; }; }; animation?: undefined; }
  | { animation: string; '@keyframes typewritter'?: undefined; })[]' is not assignable to type 
Index signature for type 'string' is missing in type 
'({ '@keyframes typewritter': { from: { width: string; }; to: { width: string; }; }; animation?: undefined; } 
  | { animation: string; '@keyframes typewritter'?: undefined; })

Tailwind version: 3.4.17

It seems that this is not the intended usage(?), unless the type definition is incorrect.

May I know what is the right way to implement this? Also, should I use matchComponent or matchUtilities?

Thanks and wish everyone has a wonderful new year.

[wongjn]

You could consider extending theme instead like:

module.exports = {
  theme: {
    extend: {
      animation: {
        typewriter: '1s ease-in-out typewriter',
      },
      keyframes: {
        typewriter: {
          from: {
            width: 'calc(var(--animate-typewriter-start) * 1ch)',
          },
          to: {
            width: 'calc(var(--animate-typewriter-end) * 1ch)',
          },

[Kynson]

Thanks. I also find that I can merge the keyframes definition and the animation definition together so the types match.