refactor: prettier tailwindcss

Author: wkylin

.prettierrc

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

package-lock.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",

package.json

@@ -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/Controls.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/Seekbar.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/SongCard.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/Track.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/VolumeBar.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/container/musicPlayer/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} />