Reuse of the variables in custom animations

Hi,

I am adding some custom animations, specifically focus-in.

I'd like to add the animation to allow me to use this plug-in, but it's not working as expected (I am fully expecting user error btw), but I couldn't find any documentation on how to do so.

Relevant pieces of my tailwind.config.ts

// Some other imports
import tailwindcssAnimate from 'tailwindcss-animate';
const config: Config = {
  theme: {
    extend: {
      keyframes: {
        // other key frames
        'text-focus-in': {
          '0%': { filter: 'blur(12px)', opacity: '0' },
          '100%': { filter: 'blur(0px)', opacity: '1' }
        }
      },
      animation: {
        'text-focus-in':
          'text-focus-in var(--tw-animation-duration, 1s) var(--tw-animate-easing, cubic-bezier(0.550, 0.085, 0.680, 0.530)) var(--tw-animate-delay, 0s) var(--tw-animate-iteration, 1) var(--tw-animate-fill, both)'
      }
    },
  plugins: [tailwindcssAnimate]
};

export default config;

I now expect to be able to animate my text with animate-duration-[5s] for e.g., but this isn't working as expected. So,

<h1 class="animate-text-focus-in">Welcome to SvelteKit</h1> works exactly as expected <h1 class="animate-text-focus-in animate-duration-[5s]">Welcome to SvelteKit</h1> doesn't change the duration at all.

new-data-services / tailwindcss-animated

Reuse of the variables in custom animations #24