How to make typing animation with Tailwind? | next13.4 & tailwind

I'm stuck a little bit with text typing animation. I want to animate the last word in this line. I've already added some improvements to tailwind.config.js, but the blinking animation is working, and the typing animation isn't.

 <h1 className='head_text text-center'>
                Discover & Share
                <br className='max-md:hidden' />
                <span className='green_gradient text-center'>
                    AI-Powered <span className='overflow-hidden whitespace-nowrap font-mono animate-typing border-r-4'>Ideas</span>
                </span>
            </h1>

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        './pages/**/*.{js,ts,jsx,tsx,mdx}',
        './components/**/*.{js,ts,jsx,tsx,mdx}',
        './app/**/*.{js,ts,jsx,tsx,mdx}',
    ],
    darkMode: 'class',
    theme: {
        extend: {
            animation: {
                typing: 'typing 2s steps(6), blink 1s infinite',
            },
            keyframes: {
                typing: {
                    from: { width: '0' },
                    to: { width: '6ch' },
                },
                blink: {
                    from: { 'border-right-color': 'transparent' },
                    to: { 'border-right-color': 'black' },
                },
            },
            fontFamily: {
                satoshi: ['Satoshi', 'sans-serif'],
                inter: ['Inter', 'sans-serif'],
            },
            colors: {
                'primary-orange': '#FF5722',
            },
        },
    },
    plugins: [],
};

<span> elements have display: inline by default and width has no effect on inline elements. You could consider applying display: inline-block on the <span> via the inline-block utility class so that width takes effect:

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-js -->

tailwind.config = {
  theme: {
    extend: {
      animation: {
        typing: 'typing 2s steps(6), blink 1s infinite',
      },
      keyframes: {
        typing: {
          from: {
            width: '0'
          },
          to: {
            width: '6ch'
          },
        },
        blink: {
          from: {
            'border-right-color': 'transparent'
          },
          to: {
            'border-right-color': 'black'
          },
        },
      },
      fontFamily: {
        satoshi: ['Satoshi', 'sans-serif'],
        inter: ['Inter', 'sans-serif'],
      },
      colors: {
        'primary-orange': '#FF5722',
      },
    },
  },
}

<!-- language: lang-html -->

<script src="https://cdn.tailwindcss.com/3.3.3"></script>

<h1 class='head_text text-center'>
  Discover & Share
  <br class='max-md:hidden' />
  <span class='green_gradient text-center'>
    AI-Powered <span class='inline-block overflow-hidden whitespace-nowrap font-mono animate-typing border-r-4'>Ideas</span>
  </span>
</h1>

<!-- end snippet -->