Why is prettier borked

app/error.tsx

@@ -2,10 +2,18 @@
 
 export default function Error({ reset }: { reset: () => void }) {
   return (
-    <div className="flex flex-col rounded-lg border border-neutral-200 bg-white p-8 dark:border-neutral-800 dark:bg-black md:p-12 max-w-xl mx-auto my-4">
+    <div className="mx-auto my-4 flex max-w-xl flex-col rounded-lg border border-neutral-200 bg-white p-8 dark:border-neutral-800 dark:bg-black md:p-12">
       <h2 className="text-xl font-bold">Oh no!</h2>
-      <p className="my-2">There was an issue with our storefront. This could be a temporary issue, please try your action again.</p>
-      <button className="w-full mt-4 flex mx-auto items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white hover:opacity-90" onClick={() => reset()}>Try Again</button>
+      <p className="my-2">
+        There was an issue with our storefront. This could be a temporary issue, please try your
+        action again.
+      </p>
+      <button
+        className="mx-auto mt-4 flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white hover:opacity-90"
+        onClick={() => reset()}
+      >
+        Try Again
+      </button>
     </div>
   );
 }

components/cart/actions.ts

@@ -18,13 +18,13 @@ export const addItem = async (variantId: string | undefined): Promise<String | u
   }
 
   if (!variantId) {
-    return 'Missing product variant ID'
+    return 'Missing product variant ID';
   }
 
   try {
     await addToCart(cartId, [{ merchandiseId: variantId, quantity: 1 }]);
   } catch (e) {
-    return 'Error adding item to cart'
+    return 'Error adding item to cart';
   }
 };
 
@@ -37,7 +37,7 @@ export const removeItem = async (lineId: string): Promise<String | undefined> =>
   try {
     await removeFromCart(cartId, [lineId]);
   } catch (e) {
-    return 'Error removing item from cart'
+    return 'Error removing item from cart';
   }
 };
 
@@ -64,6 +64,6 @@ export const updateItemQuantity = async ({
       }
     ]);
   } catch (e) {
-    return 'Error updating item quantity'
+    return 'Error updating item quantity';
   }
 };

components/cart/add-to-cart.tsx

@@ -26,43 +26,43 @@ export function AddToCart({
   );
   const selectedVariantId = variant?.id || defaultVariantId;
   const title = !availableForSale
-  ? 'Out of stock'
-  : !selectedVariantId
-  ? 'Please select options'
-  : undefined;
-
-  return (
-      <button
-        aria-label="Add item to cart"
-        disabled={isPending || !availableForSale || !selectedVariantId}
-        title={title}
-        onClick={() => {
-          // Safeguard in case someone messes with `disabled` in devtools.
-          if (!availableForSale || !selectedVariantId) return;
+    ? 'Out of stock'
+    : !selectedVariantId
+    ? 'Please select options'
+    : undefined;
 
-          startTransition(async () => {
-            const error = await addItem(selectedVariantId);
+  return (
+    <button
+      aria-label="Add item to cart"
+      disabled={isPending || !availableForSale || !selectedVariantId}
+      title={title}
+      onClick={() => {
+        // Safeguard in case someone messes with `disabled` in devtools.
+        if (!availableForSale || !selectedVariantId) return;
 
-            if (error) {
-              // Trigger the error boundary in the root error.js
-              throw new Error(error.toString());
-            }
+        startTransition(async () => {
+          const error = await addItem(selectedVariantId);
 
-            router.refresh();
-          });
-        }}
-        className={clsx(
-          'relative flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white hover:opacity-90',
-          {
-            'cursor-not-allowed opacity-60 hover:opacity-60': !availableForSale || !selectedVariantId,
-            'cursor-not-allowed': isPending
+          if (error) {
+            // Trigger the error boundary in the root error.js
+            throw new Error(error.toString());
           }
-        )}
-      >
-        <div className="absolute left-0 ml-4">
-          {!isPending ? <PlusIcon className="h-5" /> : <LoadingDots className="mb-3 bg-white" />}
-        </div>
-        <span>{availableForSale ? 'Add To Cart' : 'Out Of Stock'}</span>
-      </button>
+
+          router.refresh();
+        });
+      }}
+      className={clsx(
+        'relative flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white hover:opacity-90',
+        {
+          'cursor-not-allowed opacity-60 hover:opacity-60': !availableForSale || !selectedVariantId,
+          'cursor-not-allowed': isPending
+        }
+      )}
+    >
+      <div className="absolute left-0 ml-4">
+        {!isPending ? <PlusIcon className="h-5" /> : <LoadingDots className="mb-3 bg-white" />}
+      </div>
+      <span>{availableForSale ? 'Add To Cart' : 'Out Of Stock'}</span>
+    </button>
   );
 }

package.json

@@ -43,7 +43,7 @@
     "eslint-plugin-unicorn": "^48.0.0",
     "lint-staged": "^13.2.3",
     "postcss": "^8.4.27",
-    "prettier": "^3.0.0",
+    "prettier": "3.0.1",
     "prettier-plugin-tailwindcss": "^0.4.1",
     "tailwindcss": "^3.3.3",
     "typescript": "5.1.6"