diff --git a/src/components/stateless/BorderBeam/index.jsx b/src/components/stateless/BorderBeam/index.jsx
index 45af4977..a1eeec5d 100644
--- a/src/components/stateless/BorderBeam/index.jsx
+++ b/src/components/stateless/BorderBeam/index.jsx
@@ -21,7 +21,7 @@ const BorderBeam = ({
         '--border-width': borderWidth,
         '--color-from': colorFrom,
         '--color-to': colorTo,
-        '--delay': `-${delay}s`,
+        '--delay': `-${delay}s`
       }}
       className={clsx(
         'pointer-events-none absolute inset-0 rounded-[inherit] [border:calc(var(--border-width)*1px)_solid_transparent]',
diff --git a/src/components/stateless/WordRotate/index.jsx b/src/components/stateless/WordRotate/index.jsx
index 09d17f60..92d6b55d 100644
--- a/src/components/stateless/WordRotate/index.jsx
+++ b/src/components/stateless/WordRotate/index.jsx
@@ -10,9 +10,9 @@ const WordRotate = ({
     initial: { opacity: 0, y: -50 },
     animate: { opacity: 1, y: 0 },
     exit: { opacity: 0, y: 50 },
-    transition: { duration: 0.25, ease: 'easeOut' },
+    transition: { duration: 0.25, ease: 'easeOut' }
   },
-  className,
+  className
 }) => {
   const [index, setIndex] = useState(0)
 
@@ -25,8 +25,8 @@ const WordRotate = ({
   }, [words, duration])
 
   return (
-    <div className="py-2 overflow-hidden">
-      <AnimatePresence mode="wait">
+    <div className='py-2 overflow-hidden'>
+      <AnimatePresence mode='wait'>
         <motion.span key={words[index]} className={clsx(className)} {...motionProps}>
           {words[index]}
         </motion.span>
diff --git a/src/pages/home/index.jsx b/src/pages/home/index.jsx
index 93199dd0..e758c791 100644
--- a/src/pages/home/index.jsx
+++ b/src/pages/home/index.jsx
@@ -63,7 +63,7 @@ import {
   oneApiChat,
   prettyObject,
   // randomNum,
-  getDirection,
+  getDirection
 } from '@utils/aidFn'
 import { fireConfetti } from '@utils/confetti'
 import Zoom from 'react-medium-image-zoom'
@@ -78,7 +78,7 @@ const code = {
 main : "This component needs more than the default code block to be displayed"
 detailed : "For now, if you want the exact same behaviour, please check the github"
 }`,
-  lang: 'typescript',
+  lang: 'typescript'
 }
 
 const preCode = `
@@ -96,20 +96,20 @@ const preCode = `
 const dataSteps = [
   {
     title: 'Step 1',
-    code: 'npx create-react-app my-app',
+    code: 'npx create-react-app my-app'
   },
   {
     title: 'Step 2',
-    code: 'cd my-app',
+    code: 'cd my-app'
   },
   {
     title: 'Step 3',
-    code: 'npm start',
+    code: 'npm start'
   },
   {
     title: 'Step 4',
-    code: 'npm run build',
-  },
+    code: 'npm run build'
+  }
 ]
 
 const Home = () => {
@@ -190,8 +190,8 @@ const Home = () => {
       [
         {
           content: text,
-          role: 'user',
-        },
+          role: 'user'
+        }
       ],
       key,
       signal
@@ -285,10 +285,10 @@ const Home = () => {
         <TypeWriter
           text={['年轻到足以创新, 成熟到懂得坚持', '你既有冒险的勇气, 又有控制风险的智慧', '人生不设限，梦想不过期! ']}
           speed={70}
-          className="text-gray-500"
+          className='text-gray-500'
           waitTime={1500}
           deleteSpeed={40}
-          cursorChar={'_'}
+          cursorChar='_'
         />
       </section>
       <section style={{ marginBottom: 15, fontSize: 20, overflow: 'hidden' }}>
@@ -296,14 +296,14 @@ const Home = () => {
         <SlideText text={['amazing', 'new', 'wonderful', 'beautiful', 'smart']} />
       </section>
       <section style={{ marginBottom: 15, fontSize: 20 }}>
-        <SparklesText text="Magic UI" sparklesCount={5} />
+        <SparklesText text='Magic UI' sparklesCount={5} />
       </section>
 
       <section style={{ marginBottom: 15, fontSize: 20 }}>
-        <AutoLink text="foo bar baz http://example.org bar https://github.com/wkylin/pro-react-admin" />
+        <AutoLink text='foo bar baz http://example.org bar https://github.com/wkylin/pro-react-admin' />
       </section>
       <section style={{ marginBottom: 15, fontSize: 20 }}>
-        <ShinyText text="Just some shiny text!" disabled={false} speed={3} />
+        <ShinyText text='Just some shiny text!' disabled={false} speed={3} />
       </section>
       {/* <section style={{ marginBottom: 15, fontSize: 20 }}>
         <BlurText text="Isn't this so cool?!" delay={50} />
@@ -315,7 +315,7 @@ const Home = () => {
             'Loading awesome content',
             'Almost there',
             'Just a moment',
-            'Getting things ready',
+            'Getting things ready'
           ]}
         />
       </section>
@@ -327,7 +327,7 @@ const Home = () => {
           width: 360,
           background: '#111827',
           position: 'relative',
-          overflow: 'hidden',
+          overflow: 'hidden'
         }}
       >
         <Meteors number={40} />
@@ -338,16 +338,16 @@ const Home = () => {
           fontSize: 20,
           height: 200,
           width: 360,
-          background: '#111827',
+          background: '#111827'
         }}
       >
         <SparklesCore
-          background="transparent"
+          background='transparent'
           minSize={0.4}
           maxSize={1}
           particleDensity={1200}
-          className="w-full h-full"
-          particleColor="#FFFFFF"
+          className='w-full h-full'
+          particleColor='#FFFFFF'
         />
       </section>
       <section
@@ -357,9 +357,9 @@ const Home = () => {
           height: 200,
           width: 360,
           overflow: 'hidden',
-          position: 'relative',
+          position: 'relative'
         }}
-        className="bg-slate-900"
+        className='bg-slate-900'
       >
         <BackgroundBoxes />
       </section>
@@ -370,9 +370,9 @@ const Home = () => {
           height: 200,
           width: 360,
           overflow: 'hidden',
-          position: 'relative',
+          position: 'relative'
         }}
-        className="bg-slate-900"
+        className='bg-slate-900'
       >
         <MemoizedStars />
       </section>
@@ -387,7 +387,7 @@ const Home = () => {
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
-          color: '#fff',
+          color: '#fff'
         }}
       >
         Direction: {enterDirection}
@@ -396,29 +396,29 @@ const Home = () => {
         <CompareAll
           firstImage={firstImage}
           secondImage={secondImage}
-          firstImageClassName="object-cover object-left-top"
-          secondImageClassName="object-cover object-left-top"
-          className="h-[200px]"
-          slideMode="drag"
+          firstImageClassName='object-cover object-left-top'
+          secondImageClassName='object-cover object-left-top'
+          className='h-[200px]'
+          slideMode='drag'
         />
       </section>
       <section style={{ margin: '20px 0', width: 360, height: 200, background: '#000' }}>
         <SquaresGrid
           speed={0.5}
           squareSize={20}
-          direction="diagonal" // up, down, left, right, diagonal
-          borderColor="#222"
-          hoverFillColor="#222"
+          direction='diagonal' // up, down, left, right, diagonal
+          borderColor='#222'
+          hoverFillColor='#222'
         />
       </section>
-      <section className={styles.line}></section>
+      <section className={styles.line} />
       <section>
-        <AvatarCard avatar="https://picsum.photos/seed/picsum/300/160" text="Hi, I'm a developer." />
+        <AvatarCard avatar='https://picsum.photos/seed/picsum/300/160' text="Hi, I'm a developer." />
       </section>
       <section>
-        <IsometricCard text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti repellat, consequuntur doloribus voluptate esse iure?" />
+        <IsometricCard text='Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti repellat, consequuntur doloribus voluptate esse iure?' />
       </section>
-      <LineBordered text="A line bordered text." />
+      <LineBordered text='A line bordered text.' />
       <section style={{ display: 'flex', alignItems: 'center', marginTop: 10, marginBottom: 40 }}>
         <Atom /> <Merge /> <GitMerge /> <GitPullRequestArrow />
       </section>
@@ -431,13 +431,13 @@ const Home = () => {
       <section style={{ marginBottom: 40, fontSize: 16 }}>
         <h3>React Animate On Scroll.</h3>
         <h3>
-          <AutoLink text="https://motion.dev/ https://gsap.com/ https://www.react-spring.dev/ https://use-gesture.netlify.app/" />
+          <AutoLink text='https://motion.dev/ https://gsap.com/ https://www.react-spring.dev/ https://use-gesture.netlify.app/' />
         </h3>
         <h3 style={{ marginBottom: 40 }}>
-          <AutoLink text="https://www.npmjs.com/package/react-animate-on-scroll https://www.npmjs.com/package/react-scroll https://github.com/wellyshen/react-cool-inview" />
+          <AutoLink text='https://www.npmjs.com/package/react-animate-on-scroll https://www.npmjs.com/package/react-scroll https://github.com/wellyshen/react-cool-inview' />
         </h3>
         <ScrollAnimation>
-          <LazyLoadImage src="https://picsum.photos/seed/picsum/300/160" alt="Strawberries" />
+          <LazyLoadImage src='https://picsum.photos/seed/picsum/300/160' alt='Strawberries' />
         </ScrollAnimation>
       </section>
       {/* <section style={{ marginBottom: 40, fontSize: 36 }}>
@@ -472,18 +472,18 @@ const Home = () => {
       </section> */}
       <section style={{ marginBottom: 40 }}>
         <AnimateOnScreen.FadeIn>
-          <AvatarCard avatar="https://picsum.photos/seed/picsum/300/160" text="Hi, I'm a developer." />
+          <AvatarCard avatar='https://picsum.photos/seed/picsum/300/160' text="Hi, I'm a developer." />
         </AnimateOnScreen.FadeIn>
       </section>
       <section style={{ marginBottom: 40 }}>
         <AnimateOnScreen.FadeUp>
-          <img src="https://picsum.photos/360/200.jpg" alt="" />
+          <img src='https://picsum.photos/360/200.jpg' alt='' />
         </AnimateOnScreen.FadeUp>
       </section>
       <section style={{ marginBottom: 40, width: 360, height: 200 }}>
         <AnimateOnScreen.ScaleIn triggerOnce={false}>
           <>
-            <img src="https://picsum.photos/360/200/?blur=2" alt="" />
+            <img src='https://picsum.photos/360/200/?blur=2' alt='' />
             <section className={styles['blend-me']}>Mix Blend Mode</section>
           </>
         </AnimateOnScreen.ScaleIn>
@@ -492,24 +492,24 @@ const Home = () => {
         <AnimateOnScreen.DiyAnimation
           from={{ opacity: 0, transform: 'translate(-100%, 0)' }}
           to={{ opacity: 1, transform: 'translate(0, 0)' }}
-          triggerOnce={true}
+          triggerOnce
         >
           <Zoom>
-            <img src="https://picsum.photos/360/200.jpg" alt="" />
+            <img src='https://picsum.photos/360/200.jpg' alt='' />
           </Zoom>
         </AnimateOnScreen.DiyAnimation>
       </section>
       <section style={{ marginBottom: 40, display: 'flex' }}>
-        <SpotlightCard className="my-spot" style={{ width: 360, height: 200, color: '#fff' }}>
-          <section></section>
+        <SpotlightCard className='my-spot' style={{ width: 360, height: 200, color: '#fff' }}>
+          <section />
         </SpotlightCard>
       </section>
       <section style={{ margin: '20px 0' }}>
         <ContentPlaceholder />
       </section>
       <section style={{ margin: '20px 0' }}>
-        <div className="relative flex h-[200px] w-[360px] flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl">
-          <span className="text-3xl font-semibold leading-none text-center text-transparent whitespace-pre-wrap pointer-events-none bg-gradient-to-b from-black to-gray-300/80 bg-clip-text">
+        <div className='relative flex h-[200px] w-[360px] flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl'>
+          <span className='text-3xl font-semibold leading-none text-center text-transparent whitespace-pre-wrap pointer-events-none bg-gradient-to-b from-black to-gray-300/80 bg-clip-text'>
             Border Beam
           </span>
           <BorderBeam size={250} duration={12} delay={9} />
@@ -523,7 +523,7 @@ const Home = () => {
           height: 200,
           position: 'relative',
           backgroundColor: 'rgba(0, 0,0, 0.2)',
-          borderRadius: 8,
+          borderRadius: 8
         }}
       >
         <section className={styles.dotMask} ref={barRef}>
@@ -540,16 +540,16 @@ const Home = () => {
       </section>
       <section
         style={{
-          marginBottom: 20,
+          marginBottom: 20
         }}
       >
         <ScratchToReveal
           width={360}
           height={200}
           minScratchPercentage={70}
-          className="flex items-center justify-center overflow-hidden bg-gray-100 border-2 rounded-2xl"
+          className='flex items-center justify-center overflow-hidden bg-gray-100 border-2 rounded-2xl'
         >
-          <p className="text-9xl">✨</p>
+          <p className='text-9xl'>✨</p>
         </ScratchToReveal>
       </section>
       <section style={{ marginBottom: 40 }}>
@@ -564,16 +564,16 @@ const Home = () => {
         mask
       </section>
       <section style={{ marginBottom: 40 }}>
-        <button className={styles['button']} onClick={fireConfetti}>
+        <button className={styles.button} onClick={fireConfetti}>
           <span className={styles['button-label']}>Click Me</span>
         </button>
       </section>
 
       <section style={{ position: 'relative', margin: '80px 0 160px 100px' }}>
-        <div className={styles['circle-1']}></div>
-        <div className={styles['circle-2']}></div>
-        <div className={styles['circle-3']}></div>
-        <div className={styles['circle-4']}></div>
+        <div className={styles['circle-1']} />
+        <div className={styles['circle-2']} />
+        <div className={styles['circle-3']} />
+        <div className={styles['circle-4']} />
       </section>
 
       <section style={{ margin: 20 }} className={styles.eHElAY}>
@@ -596,12 +596,12 @@ const Home = () => {
         <NumberFlowFix />
       </section>
       <section style={{ width: 600, margin: '30px 0' }}>
-        <Input defaultValue={apiKey} placeholder="api key" onChange={changeApiKey} style={{ marginBottom: 20 }} />
-        <Flex align="center">
+        <Input defaultValue={apiKey} placeholder='api key' onChange={changeApiKey} style={{ marginBottom: 20 }} />
+        <Flex align='center'>
           <Input.TextArea
             ref={textareaRef}
             defaultValue={chatText}
-            placeholder="来，说点什么呗...Meta + Enter发送"
+            placeholder='来，说点什么呗...Meta + Enter发送'
             onChange={changeChatText}
             onKeyDown={onInputKeyDown}
             autoSize
@@ -610,13 +610,13 @@ const Home = () => {
           <Button
             style={{ margin: '0 10px' }}
             icon={<SendOutlined rotate={-60} />}
-            type="primary"
+            type='primary'
             disabled={isStream}
             onClick={onSubmit}
           >
             发送
           </Button>
-          <Button icon={<SendOutlined rotate={-60} />} type="primary" disabled={!isStream} onClick={onStop}>
+          <Button icon={<SendOutlined rotate={-60} />} type='primary' disabled={!isStream} onClick={onStop}>
             停止
           </Button>
         </Flex>
@@ -652,21 +652,21 @@ const Home = () => {
       </section>
       <section style={{ margin: 20 }}>
         <ResponsiveMasonry columnsCountBreakPoints={{ 350: 1, 750: 2, 900: 6 }}>
-          <Masonry gutter="10px">
-            <section style={{ height: 100, border: '1px solid #ccc', background: '#aaa' }}></section>
-            <section style={{ height: 200, border: '1px solid #ccc', background: '#aaa' }}></section>
-            <section style={{ height: 150, border: '1px solid #ccc', background: '#aaa' }}></section>
-            <section style={{ height: 150, border: '1px solid #ccc', background: '#aaa' }}></section>
-            <section style={{ height: 200, border: '1px solid #ccc', background: '#aaa' }}></section>
-            <section style={{ height: 100, border: '1px solid #ccc', background: '#aaa' }}></section>
-            <section style={{ height: 200, border: '1px solid #ccc', background: '#aaa' }}></section>
-            <section style={{ height: 150, border: '1px solid #ccc', background: '#aaa' }}></section>
-            <section style={{ height: 100, border: '1px solid #ccc', background: '#aaa' }}></section>
-            <section style={{ height: 150, border: '1px solid #ccc', background: '#aaa' }}></section>
-            <section style={{ height: 100, border: '1px solid #ccc', background: '#aaa' }}></section>
-            <section style={{ height: 200, border: '1px solid #ccc', background: '#aaa' }}></section>
-            <section style={{ height: 150, border: '1px solid #ccc', background: '#aaa' }}></section>
-            <section style={{ height: 150, border: '1px solid #ccc', background: '#aaa' }}></section>
+          <Masonry gutter='10px'>
+            <section style={{ height: 100, border: '1px solid #ccc', background: '#aaa' }} />
+            <section style={{ height: 200, border: '1px solid #ccc', background: '#aaa' }} />
+            <section style={{ height: 150, border: '1px solid #ccc', background: '#aaa' }} />
+            <section style={{ height: 150, border: '1px solid #ccc', background: '#aaa' }} />
+            <section style={{ height: 200, border: '1px solid #ccc', background: '#aaa' }} />
+            <section style={{ height: 100, border: '1px solid #ccc', background: '#aaa' }} />
+            <section style={{ height: 200, border: '1px solid #ccc', background: '#aaa' }} />
+            <section style={{ height: 150, border: '1px solid #ccc', background: '#aaa' }} />
+            <section style={{ height: 100, border: '1px solid #ccc', background: '#aaa' }} />
+            <section style={{ height: 150, border: '1px solid #ccc', background: '#aaa' }} />
+            <section style={{ height: 100, border: '1px solid #ccc', background: '#aaa' }} />
+            <section style={{ height: 200, border: '1px solid #ccc', background: '#aaa' }} />
+            <section style={{ height: 150, border: '1px solid #ccc', background: '#aaa' }} />
+            <section style={{ height: 150, border: '1px solid #ccc', background: '#aaa' }} />
           </Masonry>
         </ResponsiveMasonry>
       </section>
@@ -674,7 +674,7 @@ const Home = () => {
         <TagCloud />
       </section>
       <section style={{ margin: 20 }}>
-        <Marquee autoFill direction="left" gradient gradientColor="rgba(255, 255, 255, 0.8)">
+        <Marquee autoFill direction='left' gradient gradientColor='rgba(255, 255, 255, 0.8)'>
           <div
             style={{
               width: 200,
@@ -683,7 +683,7 @@ const Home = () => {
               textAlign: 'center',
               background: '#aaa',
               margin: '0 10px',
-              borderRadius: 8,
+              borderRadius: 8
               // transform: 'rotateX(60deg) rotateY(0deg) rotateZ(45deg)'
             }}
           >
@@ -692,7 +692,7 @@ const Home = () => {
         </Marquee>
       </section>
       <section style={{ margin: 20 }}>
-        <Marquee autoFill direction="right" gradient gradientColor="rgba(255, 255, 255, 0.8)">
+        <Marquee autoFill direction='right' gradient gradientColor='rgba(255, 255, 255, 0.8)'>
           <div
             style={{
               width: 200,
@@ -701,7 +701,7 @@ const Home = () => {
               textAlign: 'center',
               background: '#aaa',
               margin: '0 10px',
-              borderRadius: 8,
+              borderRadius: 8
             }}
           >
             Vue
diff --git a/tailwind.config.js b/tailwind.config.js
index 90bc7120..361d26bf 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,16 +4,16 @@ module.exports = {
   theme: {
     extend: {
       animation: {
-        'border-beam': 'border-beam calc(var(--duration)*1s) infinite linear',
+        'border-beam': 'border-beam calc(var(--duration)*1s) infinite linear'
       },
       keyframes: {
         'border-beam': {
           '100%': {
-            'offset-distance': '100%',
-          },
-        },
-      },
-    },
+            'offset-distance': '100%'
+          }
+        }
+      }
+    }
   },
-  plugins: [],
+  plugins: []
 }