refactor: prettier tailwindcss

.prettierrc

@@ -1,4 +1,5 @@
 {
+  "plugins": ["prettier-plugin-tailwindcss"],
   "semi": false,
   "trailingComma": "es5",
   "printWidth": 120,

package.json

@@ -188,7 +188,8 @@
     "postcss-normalize": "^13.0.1",
     "postcss-preset-env": "^10.1.3",
     "pre-commit": "^1.2.2",
-    "prettier": "^3.5.0",
+    "prettier": "^3.5.1",
+    "prettier-plugin-tailwindcss": "^0.6.11",
     "pretty-quick": "^4.0.0",
     "purgecss-webpack-plugin": "^7.0.2",
     "react-refresh": "^0.16.0",

src/components/container/musicPlayer/Controls.jsx

@@ -17,7 +17,7 @@ const Controls = ({
       size={20}
       color={repeat ? 'red' : 'white'}
       onClick={() => setRepeat((prev) => !prev)}
-      className="hidden sm:block cursor-pointer"
+      className="hidden cursor-pointer sm:block"
     />
     {currentSongs?.length > 0 && (
       <SkipBack size={20} color="#FFF" className="cursor-pointer" onClick={handlePrevSong} />
@@ -34,7 +34,7 @@ const Controls = ({
       size={20}
       color={shuffle ? 'red' : 'white'}
       onClick={() => setShuffle((prev) => !prev)}
-      className="hidden sm:block cursor-pointer"
+      className="hidden cursor-pointer sm:block"
     />
   </div>
 )

src/components/container/musicPlayer/Seekbar.jsx

@@ -5,29 +5,29 @@ const Seekbar = ({ value, min, max, onInput, setSeekTime, appTime }) => {
   const getTime = (time) => `${Math.floor(time / 60)}:${`0${Math.floor(time % 60)}`.slice(-2)}`
 
   return (
-    <div className="hidden sm:flex flex-row items-center">
+    <div className="hidden flex-row items-center sm:flex">
       <Rewind
         size={16}
         color="#FFF"
         onClick={() => setSeekTime(appTime - 5)}
-        className="hidden lg:mr-1 lg:block text-white"
+        className="hidden text-white lg:mr-1 lg:block"
       />
-      <span className="text-white mr-1">{value === 0 ? '0:00' : getTime(value)}</span>
+      <span className="mr-1 text-white">{value === 0 ? '0:00' : getTime(value)}</span>
       <input
         type="range"
         step="any"
         value={value}
         min={min}
         max={max}
         onInput={onInput}
-        className="md:block w-24 md:w-56 2xl:w-96 h-1 mx-4 2xl:mx-6 rounded-lg"
+        className="mx-4 h-1 w-24 rounded-lg md:block md:w-56 2xl:mx-6 2xl:w-96"
       />
-      <span className="text-white mb-0">{max === 0 ? '0:00' : getTime(max)}</span>
+      <span className="mb-0 text-white">{max === 0 ? '0:00' : getTime(max)}</span>
       <FastForward
         size={16}
         color="#FFF"
         onClick={() => setSeekTime(appTime + 5)}
-        className="hidden lg:ml-1 lg:block text-white"
+        className="hidden text-white lg:ml-1 lg:block"
       />
     </div>
   )

src/components/container/musicPlayer/SongCard.jsx

@@ -1,14 +1,14 @@
 import React from 'react'
 
 const SongCard = ({ song }) => (
-  <div className="flex flex-col w-[250px] p-4 bg-black bg-opacity-80 rounded-lg cursor-pointer">
-    <div className="relative w-full h-56 group">
-      <img alt="song_img" src={song.images?.coverart} className="w-full h-full rounded-lg" />
+  <div className="bg-opacity-80 flex w-[250px] cursor-pointer flex-col rounded-lg bg-black p-4">
+    <div className="group relative h-56 w-full">
+      <img alt="song_img" src={song.images?.coverart} className="h-full w-full rounded-lg" />
     </div>
 
     <div className="mt-4 flex flex-col">
-      <p className="font-semibold text-lg text-white truncate">{song.title}</p>
-      <p className="text-sm truncate text-gray-300 mt-1">{song.subtitle}</p>
+      <p className="truncate text-lg font-semibold text-white">{song.title}</p>
+      <p className="mt-1 truncate text-sm text-gray-300">{song.subtitle}</p>
     </div>
   </div>
 )

src/components/container/musicPlayer/Track.jsx

@@ -2,14 +2,14 @@ import React from 'react'
 import wkylinPng from '@assets/images/wkylin.png'
 
 const Track = ({ isPlaying, isActive, activeSong }) => (
-  <div className="flex-1 flex items-center justify-start">
+  <div className="flex flex-1 items-center justify-start">
     <div
-      className={`${isPlaying && isActive ? 'animate-[spin_3s_linear_infinite]' : ''} hidden sm:block h-16 w-16 mr-4`}
+      className={`${isPlaying && isActive ? 'animate-[spin_3s_linear_infinite]' : ''} mr-4 hidden h-16 w-16 sm:block`}
     >
       <img src={activeSong?.images?.coverart ?? wkylinPng} alt="cover art" className="rounded-full" />
     </div>
     <div className="w-[50%]">
-      <p className="truncate text-white font-bold text-lg">
+      <p className="truncate text-lg font-bold text-white">
         {activeSong?.title ? activeSong?.title : 'No active Song'}
       </p>
       <p className="truncate text-gray-300">{activeSong?.subtitle ? activeSong?.subtitle : 'No active Song'}</p>

src/components/container/musicPlayer/VolumeBar.jsx

@@ -13,7 +13,7 @@ const VolumeBar = ({ value, min, max, onChange, setVolume }) => (
       min={min}
       max={max}
       onChange={onChange}
-      className="2xl:w-40 lg:w-32 md:w-32 h-1 ml-2"
+      className="ml-2 h-1 md:w-32 lg:w-32 2xl:w-40"
     />
   </div>
 )

src/components/container/musicPlayer/index.jsx

@@ -39,10 +39,10 @@ const MusicPlayer = () => {
   }
 
   return (
-    <div className="absolute h-28 bottom-0 left-0 right-0 flex animate-slideup bg-linear-to-br from-white/10 to-[#2a2a80] backdrop-blur-lg z-10">
-      <div className="relative flex items-center justify-between w-full px-8 sm:px-12">
+    <div className="animate-slideup absolute right-0 bottom-0 left-0 z-10 flex h-28 bg-linear-to-br from-white/10 to-[#2a2a80] backdrop-blur-lg">
+      <div className="relative flex w-full items-center justify-between px-8 sm:px-12">
         <Track isPlaying={isPlaying} isActive={isActive} activeSong={activeSong} />
-        <div className="flex flex-col items-center justify-center flex-1">
+        <div className="flex flex-1 flex-col items-center justify-center">
           <Controls
             isPlaying={isPlaying}
             isActive={isActive}

src/components/stateless/AdvancedCodeBlock/index.jsx

@@ -7,13 +7,13 @@ const AdvancedCodeBlock = ({ code, fileName, lang = 'typescript', theme = 'githu
   return (
     <figure
       className={clsx(
-        '-mt-1 relative flex w-full flex-col flex-wrap rounded-2xl bg-neutral-200/70 text-white leading-6 dark:bg-[rgb(33,33,38)]',
+        'relative -mt-1 flex w-full flex-col flex-wrap rounded-2xl bg-neutral-200/70 leading-6 text-white dark:bg-[rgb(33,33,38)]',
         className
       )}
       {...props}
     >
       <div className="flex items-center justify-between px-5 py-3">
-        <figcaption className="mr-[-48px] max-w-full whitespace-nowrap font-medium text-neutral-600 text-xs dark:text-neutral-200">
+        <figcaption className="mr-[-48px] max-w-full text-xs font-medium whitespace-nowrap text-neutral-600 dark:text-neutral-200">
           <span>{fileName ?? <br />}</span>
         </figcaption>
         <CopyToClipboard code={code} />

src/components/stateless/AnimationTabs/index.jsx

@@ -21,7 +21,7 @@ const AnimationTabs = ({ tabs: propTabs, containerClassName, activeTabClassName,
     <>
       <div
         className={clsx(
-          'flex flex-row items-center justify-start [perspective:1000px] relative overflow-auto sm:overflow-visible no-visible-scrollbar max-w-full w-full',
+          'no-visible-scrollbar relative flex w-full max-w-full flex-row items-center justify-start overflow-auto [perspective:1000px] sm:overflow-visible',
           containerClassName
         )}
       >
@@ -33,7 +33,7 @@ const AnimationTabs = ({ tabs: propTabs, containerClassName, activeTabClassName,
             }}
             onMouseEnter={() => setHovering(true)}
             onMouseLeave={() => setHovering(false)}
-            className={clsx('relative px-4 py-2 rounded-full', tabClassName)}
+            className={clsx('relative rounded-full px-4 py-2', tabClassName)}
             style={{
               transformStyle: 'preserve-3d',
             }}
@@ -42,7 +42,7 @@ const AnimationTabs = ({ tabs: propTabs, containerClassName, activeTabClassName,
               <motion.div
                 layoutId="clickedButton"
                 transition={{ type: 'spring', bounce: 0.3, duration: 0.6 }}
-                className={clsx('absolute inset-0 bg-gray-200 dark:bg-zinc-800 rounded-full', activeTabClassName)}
+                className={clsx('absolute inset-0 rounded-full bg-gray-200 dark:bg-zinc-800', activeTabClassName)}
               />
             )}
 
@@ -66,7 +66,7 @@ export const FadeInDiv = ({ className, tabs, hovering }) => {
     return tab.value === tabs[0].value
   }
   return (
-    <div className="relative w-full h-full">
+    <div className="relative h-full w-full">
       {tabs.map((tab, idx) => (
         <motion.div
           key={tab.value}
@@ -80,7 +80,7 @@ export const FadeInDiv = ({ className, tabs, hovering }) => {
           animate={{
             y: isActive(tab) ? [0, 40, 0] : 0,
           }}
-          className={clsx('w-full h-full absolute top-0 left-0', className)}
+          className={clsx('absolute top-0 left-0 h-full w-full', className)}
         >
           {tab.content}
         </motion.div>

src/components/stateless/BackgroundBeams/index.jsx

@@ -58,12 +58,12 @@ const BackgroundBeams = React.memo(({ className }) => {
   return (
     <div
       className={clsx(
-        'absolute  h-full w-full inset-0  [mask-size:40px] [mask-repeat:no-repeat] flex items-center justify-center',
+        'absolute inset-0 flex h-full w-full items-center justify-center [mask-repeat:no-repeat] [mask-size:40px]',
         className
       )}
     >
       <svg
-        className="absolute z-0 w-full h-full pointer-events-none "
+        className="pointer-events-none absolute z-0 h-full w-full"
         width="100%"
         height="100%"
         viewBox="0 0 696 316"

src/components/stateless/BackgroundBoxes/index.jsx

@@ -28,13 +28,13 @@ export const BoxesCore = ({ className, ...rest }) => {
         transform: `translate(-40%,-60%) skewX(-48deg) skewY(14deg) scale(0.675) rotate(0deg) translateZ(0)`,
       }}
       className={clsx(
-        'absolute left-1/4 p-4 -top-1/4 flex -translate-x-1/2 -translate-y-1/2 w-full h-full z-0',
+        'absolute -top-1/4 left-1/4 z-0 flex h-full w-full -translate-x-1/2 -translate-y-1/2 p-4',
         className
       )}
       {...rest}
     >
       {rows.map((_, i) => (
-        <motion.div key={`row` + i} className="relative w-16 h-8 border-l border-slate-700">
+        <motion.div key={`row` + i} className="relative h-8 w-16 border-l border-slate-700">
           {cols.map((_, j) => (
             <motion.div
               whileHover={{
@@ -45,7 +45,7 @@ export const BoxesCore = ({ className, ...rest }) => {
                 transition: { duration: 1 },
               }}
               key={`col` + j}
-              className="relative w-16 h-8 border-t border-r border-slate-700"
+              className="relative h-8 w-16 border-t border-r border-slate-700"
             >
               {j % 2 === 0 && i % 2 === 0 ? (
                 <svg
@@ -54,7 +54,7 @@ export const BoxesCore = ({ className, ...rest }) => {
                   viewBox="0 0 24 24"
                   strokeWidth="1.5"
                   stroke="currentColor"
-                  className="absolute h-6 w-10 -top-[14px] -left-[22px] text-slate-700 stroke-[1px] pointer-events-none"
+                  className="pointer-events-none absolute -top-[14px] -left-[22px] h-6 w-10 stroke-[1px] text-slate-700"
                 >
                   <path strokeLinecap="round" strokeLinejoin="round" d="M12 6v12m6-6H6" />
                 </svg>