如何用Tailwind结合Next.js 13.4实现文字打字动画？

你的问题出在三个核心细节上，调整后就能让打字动画正常工作：

1. 给目标元素添加块级显示类 #

span标签默认是inline元素，无法设置固定宽度，导致width: 0到width: 6ch的动画变化无法生效。需要给包含"Ideas"的span添加inline-block类，让它支持宽度属性的动画变化。

修改后的页面代码：

<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 inline-block'>Ideas</span>
    </span>
</h1>

2. 修正动画的步骤数与填充模式 #

• 单词"Ideas"共5个字符，steps(6)会导致动画步骤和字符数不匹配，改成steps(5)更准确；
• 默认动画结束后会回到初始状态（宽度变回0），需要添加forwards填充模式，让动画保持最终的宽度状态。

修改后的tailwind.config.js动画配置：

animation: {
    typing: 'typing 2s steps(5) forwards, blink 1s infinite',
},
keyframes: {
    typing: {
        from: { width: '0' },
        to: { width: '5ch' }, // 对应5个字符的宽度
    },
    blink: {
        from: { 'border-right-color': 'transparent' },
        to: { 'border-right-color': 'black' },
    },
},

可选优化：适配任意单词长度 #

如果后续要更换目标单词，不想手动调整字符数，可以用更灵活的配置：

animation: {
    typing: 'typing 2s steps(auto) forwards, blink 1s infinite',
},
keyframes: {
    typing: {
        from: { width: '0' },
        to: { width: 'fit-content' }, // 自动适配单词宽度
    },
    blink: {
        from: { 'border-right-color': 'transparent' },
        to: { 'border-right-color': 'black' },
    },
},

内容的提问来源于stack exchange，提问作者antonkornilov-ua