diff --git a/.prettierrc.mjs b/.prettierrc.mjs
index c639222..f5e9e04 100644
--- a/.prettierrc.mjs
+++ b/.prettierrc.mjs
@@ -6,7 +6,7 @@ export default {
   singleQuote: true,
   tabWidth: 2,
   trailingComma: 'es5',
-  plugins: ['prettier-plugin-astro'],
+  plugins: ['prettier-plugin-astro', 'prettier-plugin-tailwindcss'],
   overrides: [
     {
       files: '*.astro',
diff --git a/package.json b/package.json
index ac3dcb6..67626d2 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
   "devDependencies": {
     "@tailwindcss/typography": "0.5.15",
     "prettier": "3.3.3",
-    "prettier-plugin-astro": "0.14.1"
+    "prettier-plugin-astro": "0.14.1",
+    "prettier-plugin-tailwindcss": "0.6.8"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 69e1905..e8f82fa 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -36,6 +36,9 @@ importers:
       prettier-plugin-astro:
         specifier: 0.14.1
         version: 0.14.1
+      prettier-plugin-tailwindcss:
+        specifier: 0.6.8
+        version: 0.6.8(prettier-plugin-astro@0.14.1)(prettier@3.3.3)
 
 packages:
 
@@ -1596,6 +1599,61 @@ packages:
     resolution: {integrity: sha512-RiBETaaP9veVstE4vUwSIcdATj6dKmXljouXc/DDNwBSPTp8FRkLGDSGFClKsAFeeg+13SB0Z1JZvbD76bigJw==}
     engines: {node: ^14.15.0 || >=16.0.0}
 
+  prettier-plugin-tailwindcss@0.6.8:
+    resolution: {integrity: sha512-dGu3kdm7SXPkiW4nzeWKCl3uoImdd5CTZEJGxyypEPL37Wj0HT2pLqjrvSei1nTeuQfO4PUfjeW5cTUNRLZ4sA==}
+    engines: {node: '>=14.21.3'}
+    peerDependencies:
+      '@ianvs/prettier-plugin-sort-imports': '*'
+      '@prettier/plugin-pug': '*'
+      '@shopify/prettier-plugin-liquid': '*'
+      '@trivago/prettier-plugin-sort-imports': '*'
+      '@zackad/prettier-plugin-twig-melody': '*'
+      prettier: ^3.0
+      prettier-plugin-astro: '*'
+      prettier-plugin-css-order: '*'
+      prettier-plugin-import-sort: '*'
+      prettier-plugin-jsdoc: '*'
+      prettier-plugin-marko: '*'
+      prettier-plugin-multiline-arrays: '*'
+      prettier-plugin-organize-attributes: '*'
+      prettier-plugin-organize-imports: '*'
+      prettier-plugin-sort-imports: '*'
+      prettier-plugin-style-order: '*'
+      prettier-plugin-svelte: '*'
+    peerDependenciesMeta:
+      '@ianvs/prettier-plugin-sort-imports':
+        optional: true
+      '@prettier/plugin-pug':
+        optional: true
+      '@shopify/prettier-plugin-liquid':
+        optional: true
+      '@trivago/prettier-plugin-sort-imports':
+        optional: true
+      '@zackad/prettier-plugin-twig-melody':
+        optional: true
+      prettier-plugin-astro:
+        optional: true
+      prettier-plugin-css-order:
+        optional: true
+      prettier-plugin-import-sort:
+        optional: true
+      prettier-plugin-jsdoc:
+        optional: true
+      prettier-plugin-marko:
+        optional: true
+      prettier-plugin-multiline-arrays:
+        optional: true
+      prettier-plugin-organize-attributes:
+        optional: true
+      prettier-plugin-organize-imports:
+        optional: true
+      prettier-plugin-sort-imports:
+        optional: true
+      prettier-plugin-style-order:
+        optional: true
+      prettier-plugin-svelte:
+        optional: true
+
   prettier@2.8.7:
     resolution: {integrity: sha512-yPngTo3aXUUmyuTjeTUT75txrf+aMh9FiD7q9ZE/i6r0bPb22g4FsE6Y338PQX1bmfy08i9QQCB7/rcUAVntfw==}
     engines: {node: '>=10.13.0'}
@@ -3942,6 +4000,12 @@ snapshots:
       prettier: 3.3.3
       sass-formatter: 0.7.9
 
+  prettier-plugin-tailwindcss@0.6.8(prettier-plugin-astro@0.14.1)(prettier@3.3.3):
+    dependencies:
+      prettier: 3.3.3
+    optionalDependencies:
+      prettier-plugin-astro: 0.14.1
+
   prettier@2.8.7:
     optional: true
 
diff --git a/src/components/NavigationMobile.astro b/src/components/NavigationMobile.astro
index 42a4f10..0cb2154 100644
--- a/src/components/NavigationMobile.astro
+++ b/src/components/NavigationMobile.astro
@@ -18,7 +18,7 @@ import HamburgerSvg from './HamburgerSvg.astro';
       </li>
     ))
   }
-  <button id="closeMenuBtn" type="button" class="absolute top-10 right-5">
+  <button id="closeMenuBtn" type="button" class="absolute right-5 top-10">
     <CloseSvg class="size-7" />
   </button>
 </ul>
@@ -35,6 +35,6 @@ import HamburgerSvg from './HamburgerSvg.astro';
 
 <style>
   .expanded {
-    @apply bg-white fixed inset-0 flex flex-col gap-5;
+    @apply fixed inset-0 flex flex-col gap-5 bg-white;
   }
 </style>
diff --git a/src/components/Tech.astro b/src/components/Tech.astro
index 03032a8..d24fd17 100644
--- a/src/components/Tech.astro
+++ b/src/components/Tech.astro
@@ -7,6 +7,6 @@ const { label } = Astro.props;
 ---
 
 <span
-  class="inline-flex justify-center items-center border rounded-full bg-gray-100 text-emerald-600 px-2 py-1"
+  class="inline-flex items-center justify-center rounded-full border bg-gray-100 px-2 py-1 text-emerald-600"
   >{label}</span
 >
diff --git a/src/layouts/PageLayout.astro b/src/layouts/PageLayout.astro
index be2311f..66020b4 100644
--- a/src/layouts/PageLayout.astro
+++ b/src/layouts/PageLayout.astro
@@ -22,8 +22,8 @@ const { title, description } = Astro.props;
     <meta name="description" content={description} />
     <slot name="head" />
   </head>
-  <body class="max-w-[48rem] mx-auto my-0 px-5">
-    <div class="min-h-screen flex flex-col justify-between">
+  <body class="mx-auto my-0 max-w-[48rem] px-5">
+    <div class="flex min-h-screen flex-col justify-between">
       <div>
         <Header />
         <slot />
diff --git a/src/pages/about.astro b/src/pages/about.astro
index 54d6b80..34de68b 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -6,11 +6,11 @@ import PageLayout from '@/layouts/PageLayout.astro';
 <PageLayout title="About">
   <article class="flex flex-col gap-10">
     <header>
-      <h1 class="text-3xl font-bold py-3">정봉찬</h1>
+      <h1 class="py-3 text-3xl font-bold">정봉찬</h1>
       <p class="text-xl">프론트엔드 개발자</p>
     </header>
     <section>
-      <h2 class="text-2xl font-bold py-2">경력</h2>
+      <h2 class="py-2 text-2xl font-bold">경력</h2>
       <ul>
         <li>
           <p class="text-xl font-bold">메멘토에이아이</p>
@@ -26,7 +26,7 @@ import PageLayout from '@/layouts/PageLayout.astro';
               피부과 시술 예약 및 뷰티 컨설팅 시스템
             </p>
             <ul
-              class="[&>:not(:first-child)]:before:content-['-'] [&>:not(:first-child)]:before:px-2"
+              class="[&>:not(:first-child)]:before:px-2 [&>:not(:first-child)]:before:content-['-']"
             >
               <li class="py-2">
                 <TechList
@@ -49,7 +49,7 @@ import PageLayout from '@/layouts/PageLayout.astro';
               피부과 관리 시스템, 백 오피스 시스템
             </p>
             <ul
-              class="[&>:not(:first-child)]:before:content-['-'] [&>:not(:first-child)]:before:px-2"
+              class="[&>:not(:first-child)]:before:px-2 [&>:not(:first-child)]:before:content-['-']"
             >
               <li class="py-2">
                 <TechList
@@ -73,7 +73,7 @@ import PageLayout from '@/layouts/PageLayout.astro';
           <div class="py-2">
             <p class="text-lg font-bold">제품 발주 시스템</p>
             <ul
-              class="[&>:not(:first-child)]:before:content-['-'] [&>:not(:first-child)]:before:px-2"
+              class="[&>:not(:first-child)]:before:px-2 [&>:not(:first-child)]:before:content-['-']"
             >
               <li class="py-2">
                 <TechList
@@ -100,7 +100,7 @@ import PageLayout from '@/layouts/PageLayout.astro';
       </ul>
     </section>
     <section>
-      <h2 class="text-2xl font-bold py-2">교육</h2>
+      <h2 class="py-2 text-2xl font-bold">교육</h2>
       <ul>
         <li>
           <p>
diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
index 912e95c..28d4323 100644
--- a/src/pages/blog/[...slug].astro
+++ b/src/pages/blog/[...slug].astro
@@ -22,7 +22,7 @@ const { Content } = await post.render();
 
 <PageLayout title={post.data.title}>
   <article>
-    <header class="border-b pb-10 text-center flex flex-col gap-3">
+    <header class="flex flex-col gap-3 border-b pb-10 text-center">
       <h1 class="text-4xl font-bold">{post.data.title}</h1>
       <p class="text-gray-500">
         <span>
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index 426f4d8..3d7dfcb 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -16,10 +16,10 @@ const posts = (await getCollection('blog')).sort(
           <article>
             <a
               href={`/blog/${post.slug}/`}
-              class="hover:text-emerald-600 flex flex-col gap-1"
+              class="flex flex-col gap-1 hover:text-emerald-600"
             >
               <h2 class="text-3xl font-bold">{post.data.title}</h2>
-              <p class="text-gray-500 text-sm">
+              <p class="text-sm text-gray-500">
                 <span>
                   작성일:
                   <FormattedDate datetime={post.data.pubDate} />
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 9d08d11..b42316e 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -16,10 +16,10 @@ const posts = (await getCollection('blog')).sort(
           <article>
             <a
               href={`/blog/${post.slug}/`}
-              class="hover:text-emerald-600 flex flex-col gap-1"
+              class="flex flex-col gap-1 hover:text-emerald-600"
             >
               <h2 class="text-3xl font-bold">{post.data.title}</h2>
-              <p class="text-gray-500 text-sm">
+              <p class="text-sm text-gray-500">
                 <span>
                   작성일:
                   <FormattedDate datetime={post.data.pubDate} />