style: format styles with Tailwind Prettier plugin

src/components/Breadcrumbs.astro

@@ -43,13 +43,13 @@ breadcrumbList[0] === "posts" &&
 
 <style>
   .breadcrumb {
-    @apply max-w-3xl mx-auto px-4 w-full mt-8 mb-1;
+    @apply mx-auto mt-8 mb-1 w-full max-w-3xl px-4;
   }
   .breadcrumb ul li {
     @apply inline;
   }
   .breadcrumb ul li a {
-    @apply opacity-70 capitalize;
+    @apply capitalize opacity-70;
   }
   .breadcrumb ul li span {
     @apply opacity-70;

src/components/Card.tsx

@@ -13,14 +13,14 @@ export default function Card({ href, frontmatter, secHeading = true }: Props) {
     <li className="my-6">
       <a
         href={href}
-        className="text-skin-accent font-medium text-lg underline-offset-4 decoration-dashed focus-visible:no-underline focus-visible:underline-offset-0 inline-block"
+        className="inline-block text-lg font-medium text-skin-accent decoration-dashed underline-offset-4 focus-visible:no-underline focus-visible:underline-offset-0"
       >
         {secHeading ? (
-          <h2 className="font-medium text-lg decoration-dashed hover:underline">
+          <h2 className="text-lg font-medium decoration-dashed hover:underline">
             {title}
           </h2>
         ) : (
-          <h3 className="font-medium text-lg decoration-dashed hover:underline">
+          <h3 className="text-lg font-medium decoration-dashed hover:underline">
             {title}
           </h3>
         )}

src/components/Datetime.tsx

@@ -6,12 +6,12 @@ export interface Props {
 
 export default function Datetime({ datetime, size = "sm", className }: Props) {
   return (
-    <div className={`opacity-80 flex items-center space-x-2 ${className}`}>
+    <div className={`flex items-center space-x-2 opacity-80 ${className}`}>
       <svg
         xmlns="http://www.w3.org/2000/svg"
         className={`${
           size === "sm" ? "scale-90" : "scale-100"
-        } w-6 h-6 inline-block fill-skin-base`}
+        } inline-block h-6 w-6 fill-skin-base`}
         aria-hidden="true"
       >
         <path d="M7 11h2v2H7zm0 4h2v2H7zm4-4h2v2h-2zm0 4h2v2h-2zm4-4h2v2h-2zm0 4h2v2h-2z"></path>

src/components/Footer.astro

@@ -28,16 +28,16 @@ const { noMarginTop = false } = Astro.props;
     @apply w-full;
   }
   .footer-wrapper {
-    @apply py-6 sm:py-4 flex flex-col sm:flex-row-reverse justify-between items-center;
+    @apply flex flex-col items-center justify-between py-6 sm:flex-row-reverse sm:py-4;
   }
   .link-button {
-    @apply p-2 my-1 hover:rotate-6;
+    @apply my-1 p-2 hover:rotate-6;
   }
   .link-button svg {
     @apply scale-125;
   }
   .copyright-wrapper {
-    @apply my-2 flex flex-col sm:flex-row items-center whitespace-nowrap;
+    @apply my-2 flex flex-col items-center whitespace-nowrap sm:flex-row;
   }
   .separator {
     @apply hidden sm:inline;

src/components/Header.astro

@@ -107,35 +107,35 @@ const { activeNav } = Astro.props;
 
 <style>
   #skip-to-content {
-    @apply bg-skin-accent text-skin-inverted py-2 px-3 absolute -top-full focus:top-4 left-16 z-50 transition-all;
+    @apply absolute -top-full left-16 z-50 bg-skin-accent py-2 px-3 text-skin-inverted transition-all focus:top-4;
   }
   .nav-container {
-    @apply max-w-3xl mx-auto flex flex-col sm:flex-row justify-between items-center;
+    @apply mx-auto flex max-w-3xl flex-col items-center justify-between sm:flex-row;
   }
   .top-nav-wrap {
-    @apply relative w-full p-4 sm:py-8 flex justify-between items-start sm:items-center;
+    @apply relative flex w-full items-start justify-between p-4 sm:items-center sm:py-8;
   }
   .logo {
-    @apply absolute sm:static font-semibold text-xl sm:text-2xl py-1;
+    @apply absolute py-1 text-xl font-semibold sm:static sm:text-2xl;
   }
   .hamburger-menu {
     @apply self-end p-2 sm:hidden;
   }
   .hamburger-menu svg {
-    @apply fill-skin-base w-6 h-6 scale-125;
+    @apply h-6 w-6 scale-125 fill-skin-base;
   }
 
   nav {
-    @apply w-full sm:py-0 sm:ml-2 flex flex-col items-center sm:justify-end sm:flex-row sm:space-x-4 bg-skin-fill;
+    @apply flex w-full flex-col items-center bg-skin-fill sm:ml-2 sm:flex-row sm:justify-end sm:space-x-4 sm:py-0;
   }
   nav ul {
-    @apply mt-4 w-44 grid grid-rows-4 grid-cols-2 gap-y-2 gap-x-2 sm:gap-y-0 sm:mt-0 sm:ml-0 sm:w-auto sm:gap-x-5;
+    @apply mt-4 grid w-44 grid-cols-2 grid-rows-4 gap-y-2 gap-x-2 sm:mt-0 sm:ml-0 sm:w-auto sm:gap-y-0 sm:gap-x-5;
   }
   nav ul li {
-    @apply col-span-2 flex justify-center items-center;
+    @apply col-span-2 flex items-center justify-center;
   }
   nav ul li a {
-    @apply px-4 py-3 w-full text-center sm:px-2 sm:py-1 sm:my-0 font-medium hover:text-skin-accent;
+    @apply w-full px-4 py-3 text-center font-medium hover:text-skin-accent sm:my-0 sm:px-2 sm:py-1;
   }
   nav ul li:nth-child(4) a {
     @apply w-auto;
@@ -145,7 +145,7 @@ const { activeNav } = Astro.props;
     @apply col-span-1;
   }
   nav a.active {
-    @apply underline underline-offset-4 decoration-wavy decoration-2;
+    @apply underline decoration-wavy decoration-2 underline-offset-4;
   }
   nav a.active svg {
     @apply fill-skin-accent;
@@ -155,20 +155,20 @@ const { activeNav } = Astro.props;
     @apply p-1;
   }
   nav button svg {
-    @apply w-6 h-6 fill-skin-base hover:fill-skin-accent;
+    @apply h-6 w-6 fill-skin-base hover:fill-skin-accent;
   }
   #theme-btn {
     @apply p-3 sm:p-1;
   }
   #theme-btn svg {
-    @apply hover:rotate-12 scale-125 sm:scale-100;
+    @apply scale-125 hover:rotate-12 sm:scale-100;
   }
 
   .icon-container {
-    @apply w-6 h-5 flex-col justify-between items-end;
+    @apply h-5 w-6 flex-col items-end justify-between;
   }
   .icon-container div {
-    @apply bg-skin-inverted h-0.5 transition-all;
+    @apply h-0.5 bg-skin-inverted transition-all;
   }
   #first-line {
     @apply w-full;

src/components/Search.tsx

@@ -78,10 +78,10 @@ export default function SearchBar({ searchList }: Props) {
           </svg>
         </span>
         <input
-          className="placeholder:italic placeholder:text-opacity-75 py-3 pl-10 pr-3 
+          className="block w-full rounded border border-skin-fill 
-        block bg-skin-fill w-full rounded
+        border-opacity-40 bg-skin-fill py-3 pl-10
-        border border-skin-fill border-opacity-40 
+        pr-3 placeholder:italic placeholder:text-opacity-75 
-        focus:outline-none focus:border-skin-accent"
+        focus:border-skin-accent focus:outline-none"
           placeholder="Search for anything..."
           type="text"
           name="search"

src/components/Socials.astro

@@ -29,6 +29,6 @@ const { centered = false } = Astro.props;
     @apply flex-wrap justify-center gap-1;
   }
   .link-button {
-    @apply p-2 sm:p-1 hover:rotate-6;
+    @apply p-2 hover:rotate-6 sm:p-1;
   }
 </style>

src/components/Tag.astro

@@ -29,9 +29,9 @@ const { name, size = "sm" } = Astro.props;
 
 <style>
   a {
-    @apply underline decoration-dashed hover:text-skin-accent relative hover:-top-0.5 focus-visible:p-1;
+    @apply relative underline decoration-dashed hover:-top-0.5 hover:text-skin-accent focus-visible:p-1;
   }
   a svg {
-    @apply w-6 h-6 text-skin-base scale-95 opacity-80 -mr-5 group-hover:fill-skin-accent;
+    @apply -mr-5 h-6 w-6 scale-95 text-skin-base opacity-80 group-hover:fill-skin-accent;
   }
 </style>

src/layouts/AboutLayout.astro

@@ -19,8 +19,8 @@ const { frontmatter } = Astro.props;
   <Header activeNav="about" />
   <Breadcrumbs />
   <main id="main-content">
-    <section id="about" class="mb-28 prose max-w-3xl prose-img:border-0">
+    <section id="about" class="prose mb-28 max-w-3xl prose-img:border-0">
-      <h1 class="text-2xl sm:text-3xl tracking-wider">{frontmatter.title}</h1>
+      <h1 class="text-2xl tracking-wider sm:text-3xl">{frontmatter.title}</h1>
       <slot />
     </section>
   </main>

src/layouts/Main.astro

@@ -18,10 +18,10 @@ const { pageTitle, pageDesc } = Astro.props;
 
 <style>
   #main-content {
-    @apply max-w-3xl mx-auto px-4 pb-12 w-full;
+    @apply mx-auto w-full max-w-3xl px-4 pb-12;
   }
   #main-content h1 {
-    @apply font-semibold text-2xl sm:text-3xl;
+    @apply text-2xl font-semibold sm:text-3xl;
   }
   #main-content p {
     @apply mt-2 mb-6 italic;

src/layouts/PostDetails.astro

@@ -22,9 +22,9 @@ const ogUrl = new URL(ogImage ? ogImage : `${title}.svg`, Astro.url.origin)
 
 <Layout title={title} author={author} description={description} ogImage={ogUrl}>
   <Header />
-  <div class="max-w-3xl mx-auto w-full px-2 flex justify-start">
+  <div class="mx-auto flex w-full max-w-3xl justify-start px-2">
     <button
-      class="mt-8 mb-2 hover:opacity-75 flex focus-outline"
+      class="focus-outline mt-8 mb-2 flex hover:opacity-75"
       onclick="history.back()"
     >
       <svg xmlns="http://www.w3.org/2000/svg"
@@ -37,7 +37,7 @@ const ogUrl = new URL(ogImage ? ogImage : `${title}.svg`, Astro.url.origin)
   <main id="main-content">
     <h1 class="post-title">{title}</h1>
     <Datetime datetime={pubDatetime} size="lg" className="my-2" />
-    <article id="article" role="article" class="mx-auto max-w-3xl mt-8 prose">
+    <article id="article" role="article" class="prose mx-auto mt-8 max-w-3xl">
       <Content />
     </article>
 
@@ -50,10 +50,10 @@ const ogUrl = new URL(ogImage ? ogImage : `${title}.svg`, Astro.url.origin)
 
 <style>
   main {
-    @apply max-w-3xl mx-auto px-4 pb-12 w-full;
+    @apply mx-auto w-full max-w-3xl px-4 pb-12;
   }
   .post-title {
-    @apply font-semibold text-2xl text-skin-accent;
+    @apply text-2xl font-semibold text-skin-accent;
   }
   .tags-container {
     @apply my-8;

src/layouts/Posts.astro

@@ -66,10 +66,10 @@ const next = pageNum < totalPages ? "" : "disabled";
 
 <style>
   .pagination-wrapper {
-    @apply flex justify-center mt-auto mb-8;
+    @apply mt-auto mb-8 flex justify-center;
   }
   .disabled {
-    @apply opacity-50 hover:text-skin-base group-hover:fill-skin-base pointer-events-none select-none;
+    @apply pointer-events-none select-none opacity-50 hover:text-skin-base group-hover:fill-skin-base;
   }
   .disabled-svg {
     @apply group-hover:!fill-skin-base;

src/pages/404.astro

@@ -28,15 +28,15 @@ import LinkButton from "@components/LinkButton.astro";
 
 <style>
   #main-content {
-    @apply max-w-3xl mx-auto flex-1 justify-center items-center flex;
+    @apply mx-auto flex max-w-3xl flex-1 items-center justify-center;
   }
   .not-found-wrapper {
-    @apply flex flex-col items-center justify-center mb-14;
+    @apply mb-14 flex flex-col items-center justify-center;
   }
   .not-found-wrapper h1 {
-    @apply font-bold text-9xl text-skin-accent;
+    @apply text-9xl font-bold text-skin-accent;
   }
   .not-found-wrapper p {
-    @apply text-2xl sm:text-3xl mt-4;
+    @apply mt-4 text-2xl sm:text-3xl;
   }
 </style>

src/pages/index.astro

@@ -126,22 +126,22 @@ const socialCount = SOCIALS.filter(social => social.active).length;
     @apply pt-8 pb-6;
   }
   #hero h1 {
-    @apply inline-block font-bold my-4 sm:my-8 text-3xl sm:text-5xl;
+    @apply my-4 inline-block text-3xl font-bold sm:my-8 sm:text-5xl;
   }
   #hero .rss-link {
     @apply mb-6;
   }
   #hero .rss-icon {
-    @apply h-6 w-6 scale-110 sm:scale-125 mb-2 sm:mb-3 fill-skin-accent;
+    @apply mb-2 h-6 w-6 scale-110 fill-skin-accent sm:mb-3 sm:scale-125;
   }
   #hero p {
     @apply my-2;
   }
   .social-wrapper {
-    @apply flex flex-col sm:flex-row sm:items-center mt-4;
+    @apply mt-4 flex flex-col sm:flex-row sm:items-center;
   }
   .social-links {
-    @apply whitespace-nowrap mr-2 sm:mb-0 mb-1;
+    @apply mr-2 mb-1 whitespace-nowrap sm:mb-0;
   }
 
   /* ===== Featured & Recent Posts Sections ===== */
@@ -151,9 +151,9 @@ const socialCount = SOCIALS.filter(social => social.active).length;
   }
   #featured h2,
   #recent-posts h2 {
-    @apply font-semibold text-2xl tracking-wide;
+    @apply text-2xl font-semibold tracking-wide;
   }
   .all-posts-btn-wrapper {
-    @apply text-center my-8;
+    @apply my-8 text-center;
   }
 </style>

src/styles/base.css

@@ -29,45 +29,45 @@
     display: block;
   }
   body {
-    @apply font-mono bg-skin-fill text-skin-base min-h-screen flex flex-col 
+    @apply flex min-h-screen flex-col bg-skin-fill font-mono text-skin-base 
-    selection:bg-skin-accent selection:text-skin-inverted selection:bg-opacity-70;
+    selection:bg-skin-accent selection:bg-opacity-70 selection:text-skin-inverted;
   }
   section,
   footer {
-    @apply max-w-3xl mx-auto px-4;
+    @apply mx-auto max-w-3xl px-4;
   }
   a {
-    @apply outline-offset-1 outline-skin-fill outline-2 
+    @apply outline-2 outline-offset-1 outline-skin-fill 
-    focus-visible:outline-dashed focus-visible:no-underline;
+    focus-visible:no-underline focus-visible:outline-dashed;
   }
   svg {
-    @apply w-6 h-6 inline-block fill-skin-base group-hover:fill-skin-accent;
+    @apply inline-block h-6 w-6 fill-skin-base group-hover:fill-skin-accent;
   }
   svg.icon-tabler {
-    @apply w-6 h-6 scale-125 sm:scale-110 opacity-90 
+    @apply inline-block h-6 w-6 scale-125 fill-transparent 
-    inline-block fill-transparent stroke-2 stroke-current 
+    stroke-current stroke-2 opacity-90 group-hover:fill-transparent 
-    group-hover:fill-transparent;
+    sm:scale-110;
   }
   .prose {
-    @apply prose-a:underline-offset-8 prose-ul:overflow-x-clip 
+    @apply prose-headings:!mb-3 prose-headings:!text-skin-base 
-    prose-a:!decoration-dashed hover:prose-a:text-skin-accent 
+    prose-h3:italic prose-p:!text-skin-base 
-    prose-img:mx-auto prose-img:border-2 prose-img:border-skin-line
+    prose-a:!text-skin-base prose-a:!decoration-dashed prose-a:underline-offset-8
-    prose-img:!mt-2 prose-headings:!mb-3
+    hover:prose-a:text-skin-accent prose-blockquote:!border-l-skin-accent
-    prose-th:border prose-th:border-skin-line
+    prose-blockquote:border-opacity-50 prose-blockquote:opacity-80
-    prose-td:border prose-td:border-skin-line
+    prose-figcaption:!text-skin-base prose-figcaption:opacity-70
-    prose-h3:italic
+    prose-strong:!text-skin-base
 
     
-    prose-p:!text-skin-base prose-headings:!text-skin-base 
+    prose-code:rounded prose-code:bg-skin-card 
-    prose-ol:!text-skin-base prose-ul:!text-skin-base prose-blockquote:opacity-80 
+    prose-code:bg-opacity-75 prose-code:p-1 prose-code:!text-skin-base 
-    prose-figcaption:!text-skin-base prose-figcaption:opacity-70
+    prose-code:before:!content-[''] prose-code:after:!content-['']
-    prose-code:bg-skin-card prose-code:bg-opacity-75 
+    prose-pre:!text-skin-base prose-ol:!text-skin-base 
-    prose-code:!text-skin-base prose-code:p-1 prose-code:rounded
+    prose-ul:overflow-x-clip prose-ul:!text-skin-base prose-li:marker:!text-skin-accent
-    prose-code:after:!content-[''] prose-code:before:!content-['']
+    prose-table:text-skin-base prose-th:border
-    prose-strong:!text-skin-base prose-table:text-skin-base 
+    prose-th:border-skin-line prose-td:border 
-    prose-pre:!text-skin-base prose-a:!text-skin-base 
+    prose-td:border-skin-line prose-img:mx-auto 
-    prose-hr:!border-skin-line prose-li:marker:!text-skin-accent 
+    prose-img:!mt-2 prose-img:border-2 
-    prose-blockquote:!border-l-skin-accent prose-blockquote:border-opacity-50;
+    prose-img:border-skin-line prose-hr:!border-skin-line;
   }
   .prose a {
     @apply hover:!text-skin-accent;
@@ -81,7 +81,7 @@
     @apply mb-2;
   }
   .prose details {
-    @apply text-skin-base cursor-pointer inline-block select-none;
+    @apply inline-block cursor-pointer select-none text-skin-base;
   }
   .prose summary {
     @apply focus-outline;
@@ -121,6 +121,6 @@
     @apply hidden;
   }
   .focus-outline {
-    @apply outline-offset-1 outline-skin-fill outline-2 focus-visible:outline-dashed focus-visible:no-underline;
+    @apply outline-2 outline-offset-1 outline-skin-fill focus-visible:no-underline focus-visible:outline-dashed;
   }
 }