Add tailwind prettier plugin

morr0ne · Jun 30, 2024 · a006d77 · a006d77
1 parent 7d2e5fb
commit a006d77
Show file tree

Hide file tree

Showing 9 changed files with 72 additions and 10 deletions.
diff --git a/.prettierrc.mjs b/.prettierrc.mjs
@@ -3,7 +3,7 @@
 export default {
   semi: true,
   singleQuote: true,
-  plugins: ['prettier-plugin-astro'],
+  plugins: ['prettier-plugin-astro', 'prettier-plugin-tailwindcss'],
   overrides: [
     {
       files: '*.astro',

diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
   "devDependencies": {
     "husky": "^9.0.11",
     "prettier": "^3.2.5",
-    "prettier-plugin-astro": "^0.14.0"
+    "prettier-plugin-astro": "^0.14.0",
+    "prettier-plugin-tailwindcss": "^0.6.5"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -4,7 +4,7 @@ import HeaderLink from './HeaderLink.astro';
 import { Icon } from 'astro-icon/components';
 ---
 
-<header class="flex flex-row justify-between align-center text-xl my-4">
+<header class="align-center my-4 flex flex-row justify-between text-xl">
   <HeaderLink href="/">Home</HeaderLink>
   <nav class="flex flex-row">
     <HeaderLink class="mx-2" href="/posts">Posts</HeaderLink>

diff --git a/src/components/HeaderLink.astro b/src/components/HeaderLink.astro
@@ -6,6 +6,6 @@ type Props = HTMLAttributes<'a'>;
 const { href, class: className } = Astro.props;
 ---
 
-<a href={href} class:list={[className, 'hover:underline flex items-center']}>
+<a href={href} class:list={[className, 'flex items-center hover:underline']}>
   <slot />
 </a>
diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
@@ -44,8 +44,8 @@ const { title, description } = Astro.props;
     <meta property="twitter:description" content={description} />
     <!-- <meta property="twitter:image" content={new URL(image, Astro.url)} /> -->
   </head>
-  <body class="bg-neutral-900 text-white font-mono">
-    <div class="max-w-5xl m-auto h-screen flex flex-col justify-between">
+  <body class="bg-neutral-900 font-mono text-white">
+    <div class="m-auto flex h-screen max-w-5xl flex-col justify-between">
       <Header />
       <main class="flex-1">
         <slot />

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -5,9 +5,9 @@ import Base from '@layouts/Base.astro';
 
 <Base title={SITE_TITLE} description={SITE_DESCRIPTION}>
   <div
-    class="flex flex-col min-h-full text-6xl md:text-8xl justify-center max-w-fit"
+    class="flex min-h-full max-w-fit flex-col justify-center text-6xl md:text-8xl"
   >
     (づ｡◕‿‿◕｡)づ
-    <span class="text-xl text-right">Soon™</span>
+    <span class="text-right text-xl">Soon™</span>
   </div>
 </Base>
diff --git a/src/pages/posts/index.astro b/src/pages/posts/index.astro
@@ -16,7 +16,7 @@ const posts = (await getCollection('blog')).sort(
       {
         posts.map((post) => (
           <li>
-            <div class="grid grid-flow-col auto-cols-max gap-4">
+            <div class="grid auto-cols-max grid-flow-col gap-4">
               <FormattedDate date={post.data.pubDate} />
               <a href={`/posts/${post.slug}/`}>
                 <h1 class="title">{post.data.title}</h1>

diff --git a/src/pages/projects/index.astro b/src/pages/projects/index.astro
@@ -13,7 +13,7 @@ const posts = await getCollection('projects');
       {
         posts.map((post) => (
           <li>
-            <div class="grid grid-flow-col auto-cols-max gap-4">
+            <div class="grid auto-cols-max grid-flow-col gap-4">
               <a href={`/projects/${post.slug}/`}>
                 <h1 class="title">{post.data.title}</h1>
               </a>