diff --git a/.prettierrc b/.prettierrc
index eb77e16..c31c163 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,5 +1,9 @@
 {
-  "plugins": ["prettier-plugin-astro", "prettier-plugin-svelte"],
+  "plugins": [
+    "prettier-plugin-astro",
+    "prettier-plugin-svelte",
+    "prettier-plugin-tailwindcss"
+  ],
   "overrides": [
     {
       "files": "*.astro",
diff --git a/src/layouts/ProseLayout.astro b/src/layouts/ProseLayout.astro
index 014720b..87cd8c0 100644
--- a/src/layouts/ProseLayout.astro
+++ b/src/layouts/ProseLayout.astro
@@ -1,5 +1,5 @@
 <div
-  class="prose prose-lg max-w-none font-serif prose-headings:text-gray-600 prose-h1:font-light prose-h1:leading-snug prose-h1:underline prose-h1:decoration-yellow-400 prose-h1:decoration-2 prose-h1:underline-offset-8 prose-p:text-gray-700 prose-a:text-emerald-700 prose-a:underline-offset-2 prose-a:duration-100 hover:prose-a:text-emerald-500 prose-strong:text-gray-700 before:prose-code:content-[''] after:prose-code:content-[''] prose-code:font-normal prose-code:text-gray-700 prose-code:bg-slate-200 prose-code:px-1 prose-code:rounded prose-code:tracking-tight"
+  class="prose prose-lg max-w-none font-serif prose-headings:text-gray-600 prose-h1:font-light prose-h1:leading-snug prose-h1:underline prose-h1:decoration-yellow-400 prose-h1:decoration-2 prose-h1:underline-offset-8 prose-p:text-gray-700 prose-a:text-emerald-700 prose-a:underline-offset-2 prose-a:duration-100 hover:prose-a:text-emerald-500 prose-strong:text-gray-700 prose-code:rounded prose-code:bg-slate-200 prose-code:px-1 prose-code:font-normal prose-code:tracking-tight prose-code:text-gray-700 before:prose-code:content-[''] after:prose-code:content-['']"
 >
   <slot />
 </div>
diff --git a/src/pages/404.astro b/src/pages/404.astro
index f534a66..6c9809a 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -7,7 +7,7 @@ import NotFoundImage from "../assets/images/404.jpeg";
 <BaseLayout title="Mikkel Svartveit">
   <section class="mx-auto max-w-4xl px-3 pb-8 pt-12 sm:px-6">
     <h1
-      class="mb-8 text-center text-3xl font-serif font-light tracking-wide text-gray-600 sm:text-4xl"
+      class="mb-8 text-center font-serif text-3xl font-light tracking-wide text-gray-600 sm:text-4xl"
     >
       PAgE nOT fOuNd
     </h1>
diff --git a/src/pages/articles/index.astro b/src/pages/articles/index.astro
index bf28df7..080a046 100644
--- a/src/pages/articles/index.astro
+++ b/src/pages/articles/index.astro
@@ -35,20 +35,20 @@ const articles = await getCollection("blog");
               return (
                 <a
                   href={`/articles/${slug}`}
-                  class="my-8 grid grid-cols-1 mx-auto max-w-xs sm:max-w-none sm:grid-cols-3 overflow-hidden rounded-lg bg-white shadow duration-100 hover:translate-x-1 hover:shadow-md group"
+                  class="group mx-auto my-8 grid max-w-xs grid-cols-1 overflow-hidden rounded-lg bg-white shadow duration-100 hover:translate-x-1 hover:shadow-md sm:max-w-none sm:grid-cols-3"
                 >
                   <Image
                     src={image}
                     alt={title}
-                    class="col-span-1 object-cover h-48 sm:h-full"
+                    class="col-span-1 h-48 object-cover sm:h-full"
                   />
 
-                  <div class="col-span-1 sm:col-span-2 px-4 py-5">
-                    <h2 class="mb-2 text-xl font-serif text-gray-700 sm:line-clamp-1 group-hover:underline underline-offset-4">
+                  <div class="col-span-1 px-4 py-5 sm:col-span-2">
+                    <h2 class="mb-2 font-serif text-xl text-gray-700 underline-offset-4 group-hover:underline sm:line-clamp-1">
                       {title}
                     </h2>
 
-                    <p class="sm:line-clamp-3 text-gray-500">{intro}</p>
+                    <p class="text-gray-500 sm:line-clamp-3">{intro}</p>
                   </div>
                 </a>
               );
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 5f79ab9..d797261 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -18,9 +18,9 @@ const latestArticleImage = latestArticle.data.image;
 
 <BaseLayout>
   <div
-    class="mx-auto flex max-w-5xl flex-col-reverse px-3 pb-6 pt-8 sm:px-6 md:flex-row items-stretch"
+    class="mx-auto flex max-w-5xl flex-col-reverse items-stretch px-3 pb-6 pt-8 sm:px-6 md:flex-row"
   >
-    <section class="w-full md:w-3/5 mb-10 mt-4">
+    <section class="mb-10 mt-4 w-full md:w-3/5">
       <h1
         class="mb-8 font-serif text-3xl font-light tracking-wide text-gray-600 sm:text-4xl"
       >
@@ -50,7 +50,7 @@ const latestArticleImage = latestArticle.data.image;
       </div>
     </section>
 
-    <figure class="px-4 md:w-1/2 my-auto">
+    <figure class="my-auto px-4 md:w-1/2">
       <Image
         class="mx-auto mb-12 block w-full max-w-sm rounded-full border-4 border-white bg-gray-100 text-transparent shadow-lg shadow-gray-400 md:mx-0 md:ml-auto md:w-5/6"
         src={portraitImage}
@@ -63,22 +63,22 @@ const latestArticleImage = latestArticle.data.image;
     </figure>
   </div>
 
-  <h2 class="text-center text-lg mb-3 text-gray-500">Latest article</h2>
+  <h2 class="mb-3 text-center text-lg text-gray-500">Latest article</h2>
   <a
     href={`/articles/${latestArticleSlug}`}
-    class="mx-auto block max-w-lg px-3 sm:px-6 text-gray-600"
+    class="mx-auto block max-w-lg px-3 text-gray-600 sm:px-6"
   >
     <div
-      class="flex bg-white shadow transition hover:shadow-md hover:underline underline-offset-4 rounded-lg overflow-hidden items-center"
+      class="flex items-center overflow-hidden rounded-lg bg-white underline-offset-4 shadow transition hover:underline hover:shadow-md"
     >
-      <Image src={latestArticleImage} alt="" class="w-24 h-16 object-cover" />
-      <h3 class="text-lg font-serif mx-3 line-clamp-2 leading-snug">
+      <Image src={latestArticleImage} alt="" class="h-16 w-24 object-cover" />
+      <h3 class="mx-3 line-clamp-2 font-serif text-lg leading-snug">
         {latestArticleTitle}
       </h3>
     </div>
   </a>
 
-  <footer class="mb-8 mt-20 flex justify-center w-full">
+  <footer class="mb-8 mt-20 flex w-full justify-center">
     <p class="text-xs text-gray-500">
       Built with
       <a
diff --git a/src/pages/photography/[photo].astro b/src/pages/photography/[photo].astro
index 35287a7..f792ca9 100644
--- a/src/pages/photography/[photo].astro
+++ b/src/pages/photography/[photo].astro
@@ -22,7 +22,7 @@ const { photo } = Astro.props;
 
 <RootLayout title="Photo" hideScrollbar themeColor="#111827">
   <div
-    class="cursor-pointer bg-gray-900 w-full h-[100svh] fixed flex justify-center"
+    class="fixed flex h-[100svh] w-full cursor-pointer justify-center bg-gray-900"
     onclick="
     history.back()
     "
@@ -32,7 +32,7 @@ const { photo } = Astro.props;
       alt=""
       height={2000}
       quality="high"
-      class="object-contain rounded w-auto h-full"
+      class="h-full w-auto rounded object-contain"
       transition:name={photo.default.src}
     />
   </div>
diff --git a/src/pages/photography/index.astro b/src/pages/photography/index.astro
index aedd06f..ba175f7 100644
--- a/src/pages/photography/index.astro
+++ b/src/pages/photography/index.astro
@@ -40,21 +40,21 @@ export const getFileNameFromPath = (path: string) => {
   </ContainerLayout>
 
   <section
-    class="px-3 mb-2 columns-2 gap-3 sm:px-4 sm:gap-4 md:columns-3 lg:columns-4"
+    class="mb-2 columns-2 gap-3 px-3 sm:gap-4 sm:px-4 md:columns-3 lg:columns-4"
   >
     {
       photos.sort(sortFiles).map((photo) => (
         <a
           href={`/photography/${getFileNameFromPath(photo.default.src)}`}
-          class="flex w-full py-1.5 duration-100 hover:-translate-y-1 rounded-lg sm:py-2"
+          class="flex w-full rounded-lg py-1.5 duration-100 hover:-translate-y-1 sm:py-2"
         >
-          <div class="bg-gray-200 rounded">
+          <div class="rounded bg-gray-200">
             <Image
               src={photo.default}
               alt=""
               width={1000}
               quality="mid"
-              class="object-contain rounded"
+              class="rounded object-contain"
               transition:name={photo.default.src}
             />
           </div>