1. 在React项目中安装Tailwind CSS

在终端输入以下命令：

npm install tailwindcss

2. 创建一个具有Animate.css类和Tailwind CSS样式的组件

在组件的CSS文件中定义样式，包括灰色背景，白色字体和动画效果。然后使用React Hooks中的useEffect()函数来添加Animate.css类并触发动画效果。

import React, { useEffect } from 'react'
import './AnimatedBar.css'

function AnimatedBar() {
  useEffect(() => {
    const animatedBar = document.querySelector('.animated-bar')
    animatedBar.classList.add('animate__animated', 'animate__bounceInUp')
  }, [])

  return (
    

      
Animated Bar
    
  )
}

export default AnimatedBar

3. 在你的React应用中使用AnimatedBar组件

import React from 'react'
import AnimatedBar from './AnimatedBar'

function App() {
  return (
    

      
    
  )
}

export default App