diff --git a/.prettierrc b/.prettierrc
index 2fec1f2..a64b191 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,5 +1,6 @@
 {
   "singleQuote": true,
   "trailingComma": "all",
-  "printWidth": 100
+  "printWidth": 100,
+  "plugins": ["prettier-plugin-tailwindcss"]
 }
diff --git a/package.json b/package.json
index 94f91ef..d5d537d 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
     "eslint-plugin-prettier": "^5.1.3",
     "postcss": "^8.4.39",
     "prettier": "^3.3.2",
+    "prettier-plugin-tailwindcss": "^0.6.6",
     "tailwindcss": "^3.4.4",
     "ts-node": "^10.0.0",
     "typescript": "~4.5.4",
diff --git a/src/renderer/app/layout.tsx b/src/renderer/app/layout.tsx
index c63719a..b3d8bf4 100644
--- a/src/renderer/app/layout.tsx
+++ b/src/renderer/app/layout.tsx
@@ -2,7 +2,7 @@ import { Outlet } from 'react-router-dom';
 
 const RootLayout = () => {
   return (
-    <div className="max-w-md m-auto bg-background-primary h-dvh font-pretendard">
+    <div className="m-auto h-dvh max-w-md bg-background-primary font-pretendard">
       <Outlet />
     </div>
   );
diff --git a/src/renderer/features/category/ui/category-chip.tsx b/src/renderer/features/category/ui/category-chip.tsx
index 86a626c..9d9402c 100644
--- a/src/renderer/features/category/ui/category-chip.tsx
+++ b/src/renderer/features/category/ui/category-chip.tsx
@@ -7,7 +7,7 @@ type CategoryChipProps = {
 
 export const CategoryChip = ({ category }: CategoryChipProps) => {
   return (
-    <div className="flex gap-sm subBody-sb text-text-tertiary bg-background-secondary p-md rounded-xs w-[80px]">
+    <div className="subBody-sb flex w-[80px] gap-sm rounded-xs bg-background-secondary p-md text-text-tertiary">
       <Icon name={getCategoryIconName(category)} size="sm" />
       {category}
     </div>
diff --git a/src/renderer/features/category/ui/change-category-drawer.tsx b/src/renderer/features/category/ui/change-category-drawer.tsx
index fd5fb06..cfde31a 100644
--- a/src/renderer/features/category/ui/change-category-drawer.tsx
+++ b/src/renderer/features/category/ui/change-category-drawer.tsx
@@ -43,8 +43,8 @@ export const ChangeCategoryDrawer = ({
       }}
     >
       <DrawerContent>
-        <div className="flex items-center justify-between gap-2 ml-xl mr-sm">
-          <DrawerTitle className="py-1 header-3">카테고리 변경</DrawerTitle>
+        <div className="ml-xl mr-sm flex items-center justify-between gap-2">
+          <DrawerTitle className="header-3 py-1">카테고리 변경</DrawerTitle>
           <DrawerClose className="p-sm">
             <Icon name="close" size="sm" />
           </DrawerClose>
@@ -54,7 +54,7 @@ export const ChangeCategoryDrawer = ({
           onValueChange={(value) => {
             setSelectedCategory(value);
           }}
-          className="flex flex-col gap-4 mt-lg px-lg"
+          className="mt-lg flex flex-col gap-4 px-lg"
         >
           {categories?.map((category) => {
             const focusTime =
@@ -67,13 +67,13 @@ export const ChangeCategoryDrawer = ({
               <SelectGroupItem
                 key={category.no}
                 value={category.title}
-                className="flex flex-row items-center justify-start w-full p-xl gap-md"
+                className="flex w-full flex-row items-center justify-start gap-md p-xl"
               >
                 <div className="flex gap-sm">
                   <Icon name={getCategoryIconName(category.title)} size="sm" />
                   <span className="body-sb text-text-primary">{category.title}</span>
                 </div>
-                <div className="flex items-center subBody-r text-text-tertiary gap-xs">
+                <div className="subBody-r flex items-center gap-xs text-text-tertiary">
                   <span>집중 {focusTime}분</span>
                   <span>|</span>
                   <span>휴식 {restTime}분</span>
diff --git a/src/renderer/features/pomodoro/ui/timeout-dialog.tsx b/src/renderer/features/pomodoro/ui/timeout-dialog.tsx
index f74f7a1..b651de8 100644
--- a/src/renderer/features/pomodoro/ui/timeout-dialog.tsx
+++ b/src/renderer/features/pomodoro/ui/timeout-dialog.tsx
@@ -10,7 +10,7 @@ export const TimeoutDialog = ({ open, onOpenChange, title, description }: Timeou
     <Dialog open={open} onOpenChange={onOpenChange} hasCloseButton={false}>
       <div className="flex flex-col gap-xl">
         <div>
-          <div className="header-4 text-text-primary py-[7.5px]">{title}</div>
+          <div className="header-4 py-[7.5px] text-text-primary">{title}</div>
           <div className="subBody-r text-text-secondary">{description}</div>
         </div>
         <Button
diff --git a/src/renderer/features/time/ui/chage-time-dialog.tsx b/src/renderer/features/time/ui/chage-time-dialog.tsx
index 758965e..4550b0d 100644
--- a/src/renderer/features/time/ui/chage-time-dialog.tsx
+++ b/src/renderer/features/time/ui/chage-time-dialog.tsx
@@ -81,27 +81,27 @@ export const ChangeTimeDialog = ({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange} fullScreen animated={false}>
-      <div className="flex flex-col h-full">
-        <div className="flex flex-col items-center justify-center flex-1 gap-8">
+      <div className="flex h-full flex-col">
+        <div className="flex flex-1 flex-col items-center justify-center gap-8">
           <div className="flex items-center justify-center gap-2 px-4 py-2">
             <Icon name={getCategoryIconName(category)} size="sm" />
             <span className="body-sb text-text-secondary">{category}</span>
           </div>
 
-          <div className="relative flex items-center justify-center gap-3 select-none">
+          <div className="relative flex select-none items-center justify-center gap-3">
             <Button
               variant="primary"
               size="none"
-              className="p-2 rounded-sm"
+              className="rounded-sm p-2"
               disabled={isMinMinutes}
               onClick={decreaseMinutes}
             >
               <Icon name="minus" size="md" />
             </Button>
 
-            <div className="flex items-center justify-center gap-3 px-4 py-5 rounded-md bg-background-secondary">
+            <div className="flex items-center justify-center gap-3 rounded-md bg-background-secondary px-4 py-5">
               <Icon name={mode === 'focus' ? 'focusTime' : 'restTime'} size="md" />
-              <div className="flex justify-center items-center gap-0.5 header-1 text-text-primary tabular-nums">
+              <div className="header-1 flex items-center justify-center gap-0.5 tabular-nums text-text-primary">
                 <span>{padNumber(minutes)}</span>
                 {/* @note: 콜론 가운데 정렬이 되지 않아 이렇게 표시함 */}
                 <span className="mt-[-8px]">:</span>
@@ -112,7 +112,7 @@ export const ChangeTimeDialog = ({
             <Button
               variant="primary"
               size="none"
-              className="p-2 rounded-sm"
+              className="rounded-sm p-2"
               disabled={isMaxMinutes}
               onClick={increaseMinutes}
             >
@@ -120,7 +120,7 @@ export const ChangeTimeDialog = ({
             </Button>
 
             <div className="absolute bottom-0 left-0 w-full">
-              <div className="absolute left-0 w-full text-center top-3 subBody-r text-text-accent-1">
+              <div className="subBody-r absolute left-0 top-3 w-full text-center text-text-accent-1">
                 {errorMessage}
               </div>
             </div>
@@ -128,7 +128,7 @@ export const ChangeTimeDialog = ({
         </div>
 
         <div className="w-full pb-[54px] text-center">
-          <Button variant="secondary" size="icon" className="p-7 aspect-square" onClick={applyTime}>
+          <Button variant="secondary" size="icon" className="aspect-square p-7" onClick={applyTime}>
             <Icon name="check" size="lg" />
           </Button>
         </div>
diff --git a/src/renderer/pages/home.tsx b/src/renderer/pages/home.tsx
index f144998..abf8550 100644
--- a/src/renderer/pages/home.tsx
+++ b/src/renderer/pages/home.tsx
@@ -27,7 +27,7 @@ const Home = () => {
   return (
     <div
       className={cn(
-        'w-full h-full bg-[#FFE9BF] flex justify-center items-center transition-opacity duration-500',
+        'flex h-full w-full items-center justify-center bg-[#FFE9BF] transition-opacity duration-500',
         isMinTimePassed ? 'opacity-100' : 'opacity-0',
       )}
     >
diff --git a/src/renderer/pages/mycat.tsx b/src/renderer/pages/mycat.tsx
index 1a73bcb..904dd08 100644
--- a/src/renderer/pages/mycat.tsx
+++ b/src/renderer/pages/mycat.tsx
@@ -42,8 +42,8 @@ const MyCat = () => {
     <Frame>
       <Frame.NavBar title="나의 고양이" onBack={() => navigate(PATH.MY_PAGE)} />
 
-      <div className="h-full flex justify-center items-center">
-        <div className="w-full flex flex-col">
+      <div className="flex h-full items-center justify-center">
+        <div className="flex w-full flex-col">
           <Tooltip
             content="사냥놀이를 하고싶다냥"
             color="white"
@@ -52,11 +52,11 @@ const MyCat = () => {
             arrowProps={{ width: 14, height: 9 }}
           />
 
-          <RiveComponent className="w-full h-[240px] select-none" />
+          <RiveComponent className="h-[240px] w-full select-none" />
 
-          <div className="w-full flex justify-center items-center">
+          <div className="flex w-full items-center justify-center">
             <button
-              className="flex gap-1 justify-center items-center p-3"
+              className="flex items-center justify-center gap-1 p-3"
               onClick={handleClickEditNameButton}
             >
               <span className="header-4 text-text-secondary">{user?.cat?.name}</span>
diff --git a/src/renderer/pages/mypage.tsx b/src/renderer/pages/mypage.tsx
index 612d896..76dbd57 100644
--- a/src/renderer/pages/mypage.tsx
+++ b/src/renderer/pages/mypage.tsx
@@ -17,7 +17,7 @@ const MyPage = () => {
     <Frame>
       <Frame.NavBar title="마이페이지" onBack={() => navigate(PATH.POMODORO)} />
 
-      <div className="flex flex-col w-full gap-3">
+      <div className="flex w-full flex-col gap-3">
         <ActionButton onClick={() => navigate(PATH.MY_CAT)}>
           <span className="subBody-r text-text-tertiary">나의 고양이</span>
           <span className="header-4 text-text-primary">{user?.cat?.name}</span>
@@ -25,9 +25,9 @@ const MyPage = () => {
 
         <ReadyForStat />
 
-        <div className="w-full p-5 rounded-sm bg-background-secondary">
-          <div className="flex items-center w-full">
-            <div className="flex flex-col justify-start flex-1">
+        <div className="w-full rounded-sm bg-background-secondary p-5">
+          <div className="flex w-full items-center">
+            <div className="flex flex-1 flex-col justify-start">
               <h3 className="body-sb text-text-primary">집중시간 알림받기</h3>
               <p className="subBody-r text-text-tertiary">
                 집중・휴식시간이 되면 고양이가 알려줘요
@@ -58,16 +58,16 @@ type ActionButtonProps = {
 };
 const ActionButton = ({ children, onClick }: ActionButtonProps) => (
   <button
-    className="flex items-center w-full p-5 rounded-sm bg-background-secondary"
+    className="flex w-full items-center rounded-sm bg-background-secondary p-5"
     onClick={onClick}
   >
-    <span className="flex flex-col items-start flex-1">{children}</span>
+    <span className="flex flex-1 flex-col items-start">{children}</span>
     <Icon name="chevronRight" size="md" />
   </button>
 );
 
 const ReadyForStat = () => (
-  <div className="flex flex-col justify-center items-center gap-2 py-[62px] bg-background-secondary rounded-sm">
+  <div className="flex flex-col items-center justify-center gap-2 rounded-sm bg-background-secondary py-[62px]">
     <Icon name="readyForStat" width={100} height={100} />
     <div className="flex flex-col gap-1 text-center">
       <h3 className="header-5 text-text-primary">통계 기능을 준비하고 있어요</h3>
diff --git a/src/renderer/pages/naming.tsx b/src/renderer/pages/naming.tsx
index 9d9a5e3..468d6b4 100644
--- a/src/renderer/pages/naming.tsx
+++ b/src/renderer/pages/naming.tsx
@@ -43,8 +43,8 @@ const Naming = () => {
   return (
     <Frame>
       <Frame.NavBar onBack={handleClickBackButton} />
-      <div className="flex items-center justify-center h-full">
-        <div className="flex flex-col w-full gap-10">
+      <div className="flex h-full items-center justify-center">
+        <div className="flex w-full flex-col gap-10">
           <Tooltip
             content="반갑다냥! 내 이름을 지어줄래냥?"
             color="white"
@@ -53,7 +53,7 @@ const Naming = () => {
             arrowProps={{ width: 14, height: 9 }}
           />
           <RiveComponent
-            className="w-full h-[240px] cursor-pointer select-none"
+            className="h-[240px] w-full cursor-pointer select-none"
             onClick={() => {
               clickCatInput?.fire();
             }}
@@ -63,12 +63,12 @@ const Naming = () => {
             <input
               value={typedCatName}
               placeholder={selectedCatName}
-              className="rounded-sm body-sb text-text-primary placeholder:text-text-disabled p-lg caret-text-accent-1"
+              className="body-sb rounded-sm p-lg text-text-primary caret-text-accent-1 placeholder:text-text-disabled"
               onChange={(e) => setTypedCatName(e.target.value)}
             />
             {errorMessage && (
               <div className="absolute bottom-[-8px] left-0 w-full">
-                <div className="absolute top-0 left-0 caption-r text-accent-red">
+                <div className="caption-r absolute left-0 top-0 text-accent-red">
                   {errorMessage}
                 </div>
               </div>
diff --git a/src/renderer/pages/onboarding.tsx b/src/renderer/pages/onboarding.tsx
index d76992e..f308754 100644
--- a/src/renderer/pages/onboarding.tsx
+++ b/src/renderer/pages/onboarding.tsx
@@ -12,7 +12,7 @@ import { cn } from '@/shared/utils';
 
 const Onboarding = () => {
   return (
-    <Carousel className="w-full h-full" opts={{ loop: true }} plugins={[Autoplay({ delay: 3000 })]}>
+    <Carousel className="h-full w-full" opts={{ loop: true }} plugins={[Autoplay({ delay: 3000 })]}>
       {/* @note: useCarousel를 사용하기 위해 별도 컴포넌트로 분리 */}
       <OnboardingContent />
     </Carousel>
@@ -45,10 +45,10 @@ const OnboardingContent = () => {
   const [, setIsCompleted] = useLocalStorage(LOCAL_STORAGE_KEY.ONBOARDING_COMPLETED, false);
 
   return (
-    <div className="flex flex-col items-center justify-center h-full gap-12">
+    <div className="flex h-full flex-col items-center justify-center gap-12">
       <div
         className={cn(
-          'w-full flex flex-col justify-center items-center gap-3xl overflow-hidden',
+          'flex w-full flex-col items-center justify-center gap-3xl overflow-hidden',
           // TODO: 가운데 정렬하고 최소 간격으로 하고 싶은데 잘 안되서 일단 주석처리함
           // 'h-sm:pt-[40px] h-md:pt-[60px] h-lg:pt-[100px] h-xl:pt-[140px]',
         )}
@@ -56,12 +56,12 @@ const OnboardingContent = () => {
         <CarouselContent>
           {contents.map(({ title, description, imageSrc }, index) => (
             <CarouselItem key={index}>
-              <div className="flex flex-col items-center justify-center gap-8 select-none">
+              <div className="flex select-none flex-col items-center justify-center gap-8">
                 <img src={imageSrc} width={240} height={240} />
 
                 <div className="flex flex-col gap-2 text-center">
                   <h2 className="header-4 text-text-primary">{title}</h2>
-                  <p className="whitespace-pre-line body-r text-text-secondary">{description}</p>
+                  <p className="body-r whitespace-pre-line text-text-secondary">{description}</p>
                 </div>
               </div>
             </CarouselItem>
@@ -73,7 +73,7 @@ const OnboardingContent = () => {
             <li
               key={index}
               className={cn(
-                'w-2 h-2 rounded-full',
+                'h-2 w-2 rounded-full',
                 index === currentIndex ? 'bg-background-tertiary' : 'bg-background-secondary',
               )}
             />
diff --git a/src/renderer/pages/selection.tsx b/src/renderer/pages/selection.tsx
index a51f6da..702b6df 100644
--- a/src/renderer/pages/selection.tsx
+++ b/src/renderer/pages/selection.tsx
@@ -86,7 +86,7 @@ const Selection = () => {
     <Frame>
       <Frame.NavBar title="고양이 선택" onBack={handleClickBackButton} />
 
-      <div className="w-full flex flex-col gap-[42px]">
+      <div className="flex w-full flex-col gap-[42px]">
         <div className="flex flex-col gap-1">
           <h1 className="header-3 text-text-primary">어떤 고양이와 함께할까요?</h1>
           <p className="body-r text-text-secondary">언제든지 다른 고양이와 함께할 수 있어요</p>
@@ -101,7 +101,7 @@ const Selection = () => {
           ))}
 
           {/* TODO: 아래를 선택한 고양이 이미지 에셋으로 변경 */}
-          <RiveComponent className="w-full h-[240px] select-none" />
+          <RiveComponent className="h-[240px] w-full select-none" />
         </div>
 
         <SelectGroup
@@ -128,9 +128,9 @@ const Selection = () => {
             <SelectGroupItem
               key={cat.id}
               value={cat.id}
-              className="h-[80px] flex-1 flex flex-col gap-1"
+              className="flex h-[80px] flex-1 flex-col gap-1"
             >
-              <span className="flex gap-1 subBody-4 text-text-tertiary">
+              <span className="subBody-4 flex gap-1 text-text-tertiary">
                 {cat.adjective} <Icon size="xs" name={cat.iconName} />
               </span>
               <span
@@ -157,7 +157,7 @@ const Selection = () => {
 
 const AlarmEmpty = () => {
   return (
-    <div className="w-full h-[72px] rounded-xs bg-background-secondary flex justify-center items-center text-center text-gray-400 body-r whitespace-pre-line">
+    <div className="body-r flex h-[72px] w-full items-center justify-center whitespace-pre-line rounded-xs bg-background-secondary text-center text-gray-400">
       {'고양이를 선택하면\n딴 짓 방해알림 예시를 보여드려요'}
     </div>
   );
@@ -172,17 +172,17 @@ const AlarmSample = ({ appName = '모하냥', time = '지금', message }: AlarmS
   return (
     <div
       className={cn(
-        'w-full h-[72px] rounded-xs bg-background-secondary flex items-center gap-[10px] px-[14px]',
-        'animate-in fade-in-0 slide-in-from-bottom-2 duration-700',
+        'flex h-[72px] w-full items-center gap-[10px] rounded-xs bg-background-secondary px-[14px]',
+        'duration-700 animate-in fade-in-0 slide-in-from-bottom-2',
         'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
       )}
     >
       <img src={appIconImage} width={38} height={38} />
 
-      <div className="flex flex-col flex-1">
+      <div className="flex flex-1 flex-col">
         <div className="flex justify-between">
           <h3 className="subBody-sb text-gray-900">{appName}</h3>
-          <p className="caption-r text-gray-300 pr-2">{time}</p>
+          <p className="caption-r pr-2 text-gray-300">{time}</p>
         </div>
         <p className="subBody-r text-gray-900">{message}</p>
       </div>
diff --git a/src/renderer/shared/ui/carousel.tsx b/src/renderer/shared/ui/carousel.tsx
index d21547c..d141e80 100644
--- a/src/renderer/shared/ui/carousel.tsx
+++ b/src/renderer/shared/ui/carousel.tsx
@@ -209,7 +209,7 @@ const CarouselPrevious = React.forwardRef<HTMLButtonElement, React.ComponentProp
         ref={ref}
         size={size}
         className={cn(
-          'absolute  h-8 w-8 rounded-full',
+          'absolute h-8 w-8 rounded-full',
           orientation === 'horizontal'
             ? '-left-12 top-1/2 -translate-y-1/2'
             : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
diff --git a/src/renderer/shared/ui/dialog.tsx b/src/renderer/shared/ui/dialog.tsx
index d46e692..9f71df6 100644
--- a/src/renderer/shared/ui/dialog.tsx
+++ b/src/renderer/shared/ui/dialog.tsx
@@ -38,9 +38,9 @@ export const Dialog = ({
         />
         <DialogPrimitive.Content
           className={cn(
-            fullScreen && 'fixed left-[50%] top-0 bottom-0 translate-x-[-50%] pt-[56px]',
+            fullScreen && 'fixed bottom-0 left-[50%] top-0 translate-x-[-50%] pt-[56px]',
             !fullScreen &&
-              'fixed left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] p-[20px] rounded-md shadow-lg',
+              'fixed left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] rounded-md p-[20px] shadow-lg',
             'z-50 w-full max-w-md bg-background-primary',
 
             animated &&
@@ -50,8 +50,8 @@ export const Dialog = ({
           {hasCloseButton && (
             <DialogPrimitive.Close
               className={cn(
-                fullScreen && 'absolute top-[10px] right-[8px] p-2',
-                !fullScreen && 'absolute top-[20px] right-[20px] p-2',
+                fullScreen && 'absolute right-[8px] top-[10px] p-2',
+                !fullScreen && 'absolute right-[20px] top-[20px] p-2',
               )}
             >
               <Icon name="close" size="md" />
@@ -62,10 +62,10 @@ export const Dialog = ({
           <DialogPrimitive.Title
             className={cn(
               fullScreen &&
-                'absolute top-0 left-0 right-0 h-[56px] flex justify-center items-center',
+                'absolute left-0 right-0 top-0 flex h-[56px] items-center justify-center',
               !fullScreen &&
-                'absolute top-[20px] left-[20px] h-[40px] flex justify-start items-center',
-              'header-4 text-text-primary pointer-events-none',
+                'absolute left-[20px] top-[20px] flex h-[40px] items-center justify-start',
+              'header-4 pointer-events-none text-text-primary',
             )}
           >
             {title}
diff --git a/src/renderer/shared/ui/frame.tsx b/src/renderer/shared/ui/frame.tsx
index c3b6959..aa09f78 100644
--- a/src/renderer/shared/ui/frame.tsx
+++ b/src/renderer/shared/ui/frame.tsx
@@ -7,8 +7,8 @@ type FrameProps = {
 };
 export const Frame = ({ children }: FrameProps) => {
   return (
-    <div className="w-full h-full relative pt-[56px] pb-[112px] overflow-y-auto">
-      <div className="p-5 h-full">{children}</div>
+    <div className="relative h-full w-full overflow-y-auto pb-[112px] pt-[56px]">
+      <div className="h-full p-5">{children}</div>
     </div>
   );
 };
@@ -19,10 +19,10 @@ type NavBarProps = {
 };
 const NavBar = ({ title, onBack }: NavBarProps) => {
   return (
-    <div className="absolute top-0 left-0 w-full h-[56px] flex justify-center items-center p-2">
+    <div className="absolute left-0 top-0 flex h-[56px] w-full items-center justify-center p-2">
       {onBack && (
         <button
-          className="absolute top-2 left-2 flex justify-center items-center w-[40px] h-[40px]"
+          className="absolute left-2 top-2 flex h-[40px] w-[40px] items-center justify-center"
           onClick={onBack}
         >
           <Icon name="back" size="md" />
@@ -37,7 +37,7 @@ type BottomBarProps = {
   children: ReactNode;
 };
 const BottomBar = ({ children }: BottomBarProps) => {
-  return <div className="absolute bottom-0 left-0 w-full h-[112px] px-5 py-6">{children}</div>;
+  return <div className="absolute bottom-0 left-0 h-[112px] w-full px-5 py-6">{children}</div>;
 };
 
 Frame.NavBar = NavBar;
diff --git a/src/renderer/shared/ui/guide.tsx b/src/renderer/shared/ui/guide.tsx
index ef7f7cd..8ea6359 100644
--- a/src/renderer/shared/ui/guide.tsx
+++ b/src/renderer/shared/ui/guide.tsx
@@ -66,7 +66,7 @@ export const Guide = ({ steps, handler }: TGuideProps) => {
     <div className="fixed inset-0 cursor-pointer" onClick={handleGuideClick}>
       {/* 2. 빵꾸 뚫을 영역 */}
       <div
-        className="absolute duration-300 rounded-xs w-fit transition-position"
+        className="transition-position absolute w-fit rounded-xs duration-300"
         style={{
           // boxShadow로 뷰포트 덮는 검정 반투명 영역 만들고 가이드 하려는 영역 빵꾸 뚫기
           boxShadow: `0 0 0 100vmax rgba(0, 0, 0, 0.5),
@@ -81,8 +81,8 @@ export const Guide = ({ steps, handler }: TGuideProps) => {
       {/* 3. 툴팁 메세지 */}
       <div
         className={cn(
-          'bg-white rounded-xs p-md text-text-secondary transition-position duration-300',
-          isAnimating ? 'opacity-0 translate-y-4' : 'opacity-100 translate-y-0',
+          'transition-position rounded-xs bg-white p-md text-text-secondary duration-300',
+          isAnimating ? 'translate-y-4 opacity-0' : 'translate-y-0 opacity-100',
         )}
         style={{
           position: 'absolute',
@@ -93,7 +93,7 @@ export const Guide = ({ steps, handler }: TGuideProps) => {
       >
         {steps[currentGuideIndex].message}
         <div
-          className="absolute w-0 h-0"
+          className="absolute h-0 w-0"
           style={{
             bottom: '-8px',
             left: '50%',
diff --git a/src/renderer/shared/ui/toast.tsx b/src/renderer/shared/ui/toast.tsx
index 5ba42aa..849d26e 100644
--- a/src/renderer/shared/ui/toast.tsx
+++ b/src/renderer/shared/ui/toast.tsx
@@ -16,7 +16,7 @@ export const ToastViewport = forwardRef<
     className={cn(
       // @note: 기존 코드는 비교용으로 주석처리. 참고로 기존 것은 화면 해상도에 따라 나타나는 위치가 달랐음
       // 'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
-      'fixed bottom-0 left-[50%] translate-x-[-50%] z-[100] flex max-h-screen w-full max-w-[400px] flex-col-reverse p-4 pb-12',
+      'fixed bottom-0 left-[50%] z-[100] flex max-h-screen w-full max-w-[400px] translate-x-[-50%] flex-col-reverse p-4 pb-12',
       className,
     )}
     {...props}
@@ -35,7 +35,7 @@ export const Toast = forwardRef<
       ref={ref}
       className={cn(
         'group pointer-events-auto relative flex w-full items-center justify-start gap-2 overflow-hidden shadow-lg',
-        'rounded-sm p-4 bg-gray-900 text-white opacity-90 subBody-r text-left',
+        'subBody-r rounded-sm bg-gray-900 p-4 text-left text-white opacity-90',
         'transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
         className,
       )}
@@ -59,7 +59,7 @@ export const ToastClose = forwardRef<
     toast-close=""
     {...props}
   >
-    <X className="w-4 h-4" />
+    <X className="h-4 w-4" />
   </ToastPrimitives.Close>
 ));
 ToastClose.displayName = ToastPrimitives.Close.displayName;
diff --git a/src/renderer/shared/ui/toggle.tsx b/src/renderer/shared/ui/toggle.tsx
index ee5ba85..b3c1f0f 100644
--- a/src/renderer/shared/ui/toggle.tsx
+++ b/src/renderer/shared/ui/toggle.tsx
@@ -37,7 +37,7 @@ const Toggle = React.forwardRef<
       <div
         className={cn(
           pressed ? 'translate-x-4' : 'translate-x-0',
-          'w-5 h-5 bg-white rounded-full shadow-md transition-transform duration-200 ease-in-out',
+          'h-5 w-5 rounded-full bg-white shadow-md transition-transform duration-200 ease-in-out',
         )}
       />
     </TogglePrimitive.Root>
diff --git a/src/renderer/shared/ui/tooltip.tsx b/src/renderer/shared/ui/tooltip.tsx
index 9850cb9..4af19c6 100644
--- a/src/renderer/shared/ui/tooltip.tsx
+++ b/src/renderer/shared/ui/tooltip.tsx
@@ -31,9 +31,9 @@ export const Tooltip = ({
           // @see: https://github.com/shadcn-ui/ui/issues/2753
           // TooltipPrimitive.Content에 overflow: hidden을 적용하면 arrow가 뒤늦게 보여지는 버그가 있어 제거
           className={cn(
-            color === 'black' && 'text-white bg-gray-900',
-            color === 'white' && 'text-gray-600 bg-white',
-            'z-50 rounded-xs px-lg py-md shadow-xs body-sb',
+            color === 'black' && 'bg-gray-900 text-white',
+            color === 'white' && 'bg-white text-gray-600',
+            'shadow-xs body-sb z-50 rounded-xs px-lg py-md',
             'animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
             className,
           )}
diff --git a/src/renderer/widgets/pomodoro/ui/focus-screen.tsx b/src/renderer/widgets/pomodoro/ui/focus-screen.tsx
index 14858fb..b366d5a 100644
--- a/src/renderer/widgets/pomodoro/ui/focus-screen.tsx
+++ b/src/renderer/widgets/pomodoro/ui/focus-screen.tsx
@@ -31,14 +31,14 @@ export const FocusScreen = ({ currentCategory, time, handleRest, handleEnd }: Fo
   });
 
   return (
-    <div className="relative flex flex-col h-full">
+    <div className="relative flex h-full flex-col">
       <header className="flex p-4">
-        <div className="flex gap-sm subBody-sb text-text-tertiary bg-background-secondary p-md rounded-xs w-[80px]">
+        <div className="subBody-sb flex w-[80px] gap-sm rounded-xs bg-background-secondary p-md text-text-tertiary">
           <Icon name={getCategoryIconName(currentCategory)} size="sm" />
           {currentCategory}
         </div>
       </header>
-      <main className="flex flex-col items-center justify-center flex-1">
+      <main className="flex flex-1 flex-col items-center justify-center">
         <Tooltip
           content={isExceed ? toolTipContentMap.exceed : toolTipContentMap.default}
           color="white"
@@ -47,31 +47,31 @@ export const FocusScreen = ({ currentCategory, time, handleRest, handleEnd }: Fo
           arrowProps={{ width: 14, height: 9 }}
         />
         <RiveComponent
-          className="w-full h-[240px] cursor-pointer select-none"
+          className="h-[240px] w-full cursor-pointer select-none"
           onClick={() => {
             clickCatInput?.fire();
           }}
         />
-        <div className="flex flex-col items-center mt-xl">
+        <div className="mt-xl flex flex-col items-center">
           <div className="flex gap-xs">
             <Icon name="focusTime" width={20} height={20} />
             <span className="header-5 text-text-secondary">집중시간</span>
           </div>
-          <Time minutes={minutes} seconds={seconds} className="header-1 text-text-primary gap-xs" />
+          <Time minutes={minutes} seconds={seconds} className="header-1 gap-xs text-text-primary" />
           <div className={cn('flex items-center gap-xs', isExceed ? 'opacity-100' : 'opacity-0')}>
             <Time
               minutes={exceedMinutes}
               seconds={exceedSeconds}
-              className="gap-0 text-text-accent-1 header-4"
+              className="header-4 gap-0 text-text-accent-1"
             />
-            <span className="text-text-accent-1 header-4">초과</span>
+            <span className="header-4 text-text-accent-1">초과</span>
           </div>
         </div>
       </main>
-      <div className="flex flex-col items-center w-full pb-5">
+      <div className="flex w-full flex-col items-center pb-5">
         <Button
           variant={isExceed ? 'primary' : 'secondary'}
-          className="p-xl w-[200px]"
+          className="w-[200px] p-xl"
           size="lg"
           onClick={handleRest}
         >
diff --git a/src/renderer/widgets/pomodoro/ui/home-screen.tsx b/src/renderer/widgets/pomodoro/ui/home-screen.tsx
index 08c53ac..4ec00b8 100644
--- a/src/renderer/widgets/pomodoro/ui/home-screen.tsx
+++ b/src/renderer/widgets/pomodoro/ui/home-screen.tsx
@@ -75,18 +75,18 @@ export const HomeScreen = ({
 
   return (
     <>
-      <div className="flex flex-col h-full">
+      <div className="flex h-full flex-col">
         <header className="flex justify-end p-4">
           <Button
             variant="text-primary"
             size="md"
-            className="p-[8px] rounded-none bg-gray-50"
+            className="rounded-none bg-gray-50 p-[8px]"
             onClick={() => navigate(PATH.MY_PAGE)}
           >
             <Icon name="menu" size="md" />
           </Button>
         </header>
-        <main className="flex flex-col gap-[25px] items-center justify-center flex-1">
+        <main className="flex flex-1 flex-col items-center justify-center gap-[25px]">
           <Tooltip
             content={tooltipMessage}
             color="white"
@@ -95,17 +95,17 @@ export const HomeScreen = ({
             arrowProps={{ width: 14, height: 9 }}
           />
           <RiveComponent
-            className="w-full h-[240px] cursor-pointer select-none"
+            className="h-[240px] w-full cursor-pointer select-none"
             onClick={() => {
               clickCatInput?.fire();
             }}
           />
 
           <div className="header-4 text-text-tertiary">{user?.cat?.name}</div>
-          <div className="flex flex-col p-lg gap-md">
+          <div className="flex flex-col gap-md p-lg">
             <Button
               variant="tertiary"
-              className="w-[80px] mx-auto"
+              className="mx-auto w-[80px]"
               size="sm"
               id="categoryButton"
               onClick={() => {
@@ -115,26 +115,26 @@ export const HomeScreen = ({
               <Icon name={getCategoryIconName(currentCategory)} size="sm" />
               {currentCategory}
             </Button>
-            <div className="flex items-center p-xs gap-md" id="timeAdjustDiv">
+            <div className="flex items-center gap-md p-xs" id="timeAdjustDiv">
               <button
-                className="flex items-center cursor-pointer p-sm gap-sm"
+                className="flex cursor-pointer items-center gap-sm p-sm"
                 onClick={() => {
                   setClickedMode('focus');
                   changeTimeDialogProps.onOpen();
                 }}
               >
-                <span className="text-gray-500 body-sb">집중</span>
+                <span className="body-sb text-gray-500">집중</span>
                 <span className="header-3 text-text-secondary">{currentFocusMinutes}분</span>
               </button>
-              <div className="w-[2px] h-[20px] bg-gray-200 rounded-full" />
+              <div className="h-[20px] w-[2px] rounded-full bg-gray-200" />
               <button
-                className="flex items-center cursor-pointer p-sm gap-sm"
+                className="flex cursor-pointer items-center gap-sm p-sm"
                 onClick={() => {
                   setClickedMode('rest');
                   changeTimeDialogProps.onOpen();
                 }}
               >
-                <span className="text-gray-500 body-sb">휴식</span>
+                <span className="body-sb text-gray-500">휴식</span>
                 <span className="header-3 text-text-secondary">{currentRestMinutes}분</span>
               </button>
             </div>
diff --git a/src/renderer/widgets/pomodoro/ui/rest-screen.tsx b/src/renderer/widgets/pomodoro/ui/rest-screen.tsx
index 9b59e61..6c35f83 100644
--- a/src/renderer/widgets/pomodoro/ui/rest-screen.tsx
+++ b/src/renderer/widgets/pomodoro/ui/rest-screen.tsx
@@ -38,15 +38,15 @@ export const RestScreen = ({
   });
 
   return (
-    <div className="relative flex flex-col h-full">
+    <div className="relative flex h-full flex-col">
       <header className="flex px-5 py-2">
-        <div className="h-[40px] flex items-center gap-sm subBody-sb text-text-tertiary bg-background-secondary px-3 py-2 rounded-xs">
+        <div className="subBody-sb flex h-[40px] items-center gap-sm rounded-xs bg-background-secondary px-3 py-2 text-text-tertiary">
           <Icon name={getCategoryIconName(currentCategory)} size="sm" />
           {currentCategory}
         </div>
       </header>
 
-      <main className="flex flex-col items-center justify-center flex-1 gap-5">
+      <main className="flex flex-1 flex-col items-center justify-center gap-5">
         <Tooltip
           content={!isExceed ? '쉬는게 제일 좋다냥' : '이제 다시 사냥놀이 하자냥!'}
           color="white"
@@ -55,7 +55,7 @@ export const RestScreen = ({
           arrowProps={{ width: 14, height: 9 }}
         />
         <RiveComponent
-          className="w-full h-[240px] cursor-pointer select-none"
+          className="h-[240px] w-full cursor-pointer select-none"
           onClick={() => {
             clickCatInput?.fire();
           }}
@@ -65,14 +65,14 @@ export const RestScreen = ({
             <Icon name="restTime" width={20} height={20} />
             <span className="header-5 text-text-secondary">휴식시간</span>
           </div>
-          <Time minutes={minutes} seconds={seconds} className="header-1 text-text-primary gap-xs" />
+          <Time minutes={minutes} seconds={seconds} className="header-1 gap-xs text-text-primary" />
           <div className={cn('flex items-center gap-xs', !isExceed && 'opacity-0')}>
             <Time
               minutes={exceedMinutes}
               seconds={exceedSeconds}
-              className="gap-0 text-text-accent-1 header-4"
+              className="header-4 gap-0 text-text-accent-1"
             />
-            <span className="text-text-accent-1 header-4">초과</span>
+            <span className="header-4 text-text-accent-1">초과</span>
           </div>
         </div>
 
@@ -103,7 +103,7 @@ export const RestScreen = ({
         </div>
       </main>
 
-      <div className="flex flex-col items-center w-full pb-5">
+      <div className="flex w-full flex-col items-center pb-5">
         <Button variant="secondary" className="w-[200px]" size="lg" onClick={handleFocus}>
           한번 더 집중하기
         </Button>
diff --git a/src/renderer/widgets/pomodoro/ui/rest-wait-screen.tsx b/src/renderer/widgets/pomodoro/ui/rest-wait-screen.tsx
index 22d8f45..7437dba 100644
--- a/src/renderer/widgets/pomodoro/ui/rest-wait-screen.tsx
+++ b/src/renderer/widgets/pomodoro/ui/rest-wait-screen.tsx
@@ -36,24 +36,24 @@ export const RestWaitScreen = ({
   );
 
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex h-full flex-col">
       <header className="h-[56px]" />
-      <main className="flex flex-col items-center justify-center flex-1 gap-5">
+      <main className="flex flex-1 flex-col items-center justify-center gap-5">
         <div className="flex flex-col items-center justify-center gap-sm">
           <CategoryChip category={currentCategory} />
-          <Time minutes={minutes} seconds={seconds} className="header-1 text-text-primary gap-xs" />
+          <Time minutes={minutes} seconds={seconds} className="header-1 gap-xs text-text-primary" />
           {isExceed && (
             <div className="flex items-center gap-xs">
               <Time
                 minutes={exceedMinutes}
                 seconds={exceedSeconds}
-                className="gap-0 text-text-accent-1 header-4"
+                className="header-4 gap-0 text-text-accent-1"
               />
-              <span className="text-text-accent-1 header-4">초과</span>
+              <span className="header-4 text-text-accent-1">초과</span>
             </div>
           )}
         </div>
-        <div className="relative w-[240px] h-[240px]">
+        <div className="relative h-[240px] w-[240px]">
           <DotLottieReact
             src={completeFocusLottie}
             autoplay
@@ -105,8 +105,8 @@ export const RestWaitScreen = ({
           </SelectGroup>
         </div>
       </main>
-      <div className="flex flex-col items-center w-full pb-5">
-        <Button variant="primary" className="p-xl w-[200px]" size="lg" onClick={handleRest}>
+      <div className="flex w-full flex-col items-center pb-5">
+        <Button variant="primary" className="w-[200px] p-xl" size="lg" onClick={handleRest}>
           휴식 시작하기
         </Button>
         <Button variant="text-secondary" size="md" onClick={handleEnd}>
diff --git a/yarn.lock b/yarn.lock
index 9475863..5b0abe2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5199,6 +5199,11 @@ prettier-linter-helpers@^1.0.0:
   dependencies:
     fast-diff "^1.1.2"
 
+prettier-plugin-tailwindcss@^0.6.6:
+  version "0.6.6"
+  resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.6.tgz#93e524d3c30f3fb45dc9e99de985b2a584ff063f"
+  integrity sha512-OPva5S7WAsPLEsOuOWXATi13QrCKACCiIonFgIR6V4lYv4QLp++UXVhZSzRbZxXGimkQtQT86CC6fQqTOybGng==
+
 prettier@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.3.2.tgz#03ff86dc7c835f2d2559ee76876a3914cec4a90a"