Autoformatting

src/components/Notice.astro

@@ -11,7 +11,7 @@ const { colorClass, className } = Astro.props
 
 <div
   class={twJoin(
-    'p-4 rounded leading-normal prose prose-blue [--tw-prose-bullets:_black] prose-p:first-child:my-0 prose-h1:mt-0 prose-h2:!mt-0',
+    'prose-p:first-child:my-0 prose prose-blue rounded p-4 leading-normal [--tw-prose-bullets:_black] prose-h1:mt-0 prose-h2:!mt-0',
     className,
     colorClass || 'bg-sky-100',
   )}

src/components/text/CardWrapper.astro

@@ -13,7 +13,7 @@ const { classes, sectionClasses, headline } = Astro.props
 
 <ProseSection classes={sectionClasses}>
   {headline ? <h2>{headline}</h2> : ''}
-  <div class={twMerge('grid sm:grid-cols-2 gap-4 mb-3', classes)}>
+  <div class={twMerge('mb-3 grid gap-4 sm:grid-cols-2', classes)}>
     <slot />
   </div>
 </ProseSection>

src/components/text/ProjectHeadline.astro

@@ -20,5 +20,5 @@ const { title, subtitle, titleClasses, subtitleClasses } = Astro.props
   >
     {title}
   </h1>
-  <p class={twMerge('text-3xl font-bold text-sky-700 mb-20', subtitleClasses)}>{subtitle}</p>
+  <p class={twMerge('mb-20 text-3xl font-bold text-sky-700', subtitleClasses)}>{subtitle}</p>
 </header>

src/layouts/Navigation/MenuItem/MenuItem.astro

@@ -21,7 +21,7 @@ const active = highlightExactMatch
   href={href}
   class={twMerge(
     active ? menuActiveClasses : 'hover:bg-blue-50',
-    'flex items-center border-b border-gray-200 py-2.5 pl-4 pr-2 leading-tight justify-between group/item',
+    'group/item flex items-center justify-between border-b border-gray-200 py-2.5 pl-4 pr-2 leading-tight',
   )}
   data-item-active-debugger={active}
   {...{ rel: external ? 'noopener noreferrer' : undefined }}

src/layouts/Navigation/Navigation.astro

@@ -19,7 +19,7 @@ const { layoutType, project, menuHighlight } = Astro.props
   data-navigation-project={project}
   class={twJoin(
     layoutType === 'app' ? 'bg-white' : 'mb-10 lg:mb-0',
-    'flex lg:block justify-between lg:relative z-[1001] w-full px-3 py-3 shadow-xl lg:z-auto lg:w-64 lg:py-6 lg:shadow-none flex-none',
+    'z-[1001] flex w-full flex-none justify-between px-3 py-3 shadow-xl lg:relative lg:z-auto lg:block lg:w-64 lg:py-6 lg:shadow-none',
     'group/navi',
   )}
   lang="de"

src/layouts/Navigation/NavigationFooter.astro

@@ -28,7 +28,7 @@ const { menuHighlight, additionalLinks } = Astro.props
   }
   <li>
     <a
-      class={(twJoin(menuHighlight === 'contact' ? 'text-black text-bold' : 'hover:text-gray-500'),
+      class={(twJoin(menuHighlight === 'contact' ? 'text-bold text-black' : 'hover:text-gray-500'),
       'underline')}
       href="/contact"
       lang="de"

src/layouts/baseStyles.ts

@@ -8,7 +8,7 @@ export const proseBase = twJoin(
   // <ul>
   '[--tw-prose-bullets:_gray]',
   // <code>
-  'prose-code:rounded prose-code:bg-neutral-100 prose-code:box-decoration-clone prose-code:py-1 prose-code:px-1.5 prose-code:text-neutral-800 prose-code:before:content-none prose-code:after:content-none',
+  'prose-code:rounded prose-code:bg-neutral-100 prose-code:box-decoration-clone prose-code:px-1.5 prose-code:py-1 prose-code:text-neutral-800 prose-code:before:content-none prose-code:after:content-none',
   // <blockquote>
   'prose-blockquote:bg-gray-100 prose-blockquote:p-4 prose-blockquote:pb-2',
 )
@@ -17,9 +17,9 @@ export const proseHeadings = twJoin(
   // <h#> anchor position
   'prose-headings:scroll-mt-10',
   // <h1>
-  'prose-h1:text-sky-700 prose-h1:mt-16 prose-h1:mb-3 first:prose-h1:mt-0',
+  'prose-h1:mb-3 prose-h1:mt-16 prose-h1:text-sky-700 first:prose-h1:mt-0',
   // <h2>
-  'prose-h2:mt-16 prose-h2:mb-4',
+  'prose-h2:mb-4 prose-h2:mt-16',
   // <h3>
-  'prose-h3:mt-8 prose-h3:mb-4',
+  'prose-h3:mb-4 prose-h3:mt-8',
 )