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