Merge pull request #64 from devwqc/feat/prettier-tailwind

devwqc · web-flow · commit c49b66f31a91 · 2024-11-08T23:52:34.000+09:00
[feat] prettier tailwind
diff --git 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
@@ -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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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} />

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@ export default {`
`6`	`6`	`singleQuote: true,`
`7`	`7`	`tabWidth: 2,`
`8`	`8`	`trailingComma: 'es5',`
`9`		`- plugins: ['prettier-plugin-astro'],`
	`9`	`+ plugins: ['prettier-plugin-astro', 'prettier-plugin-tailwindcss'],`
`10`	`10`	`overrides: [`
`11`	`11`	`{`
`12`	`12`	`files: '*.astro',`
Original file line number	Diff line number	Diff line change
`@@ -43,6 +43,7 @@`
`43`	`43`	`"devDependencies": {`
`44`	`44`	`"@tailwindcss/typography": "0.5.15",`
`45`	`45`	`"prettier": "3.3.3",`
`46`		`- "prettier-plugin-astro": "0.14.1"`
	`46`	`+ "prettier-plugin-astro": "0.14.1",`
	`47`	`+ "prettier-plugin-tailwindcss": "0.6.8"`
`47`	`48`	`}`
`48`	`49`	`}`
Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,6 @@ const { label } = Astro.props;`
`7`	`7`	`---`
`8`	`8`
`9`	`9`	`<span`
`10`		`- class="inline-flex justify-center items-center border rounded-full bg-gray-100 text-emerald-600 px-2 py-1"`
	`10`	`+ class="inline-flex items-center justify-center rounded-full border bg-gray-100 px-2 py-1 text-emerald-600"`
`11`	`11`	`>{label}</span`
`12`	`12`	`>`