build!: upgrade to Tailwind CSS v4

src/layouts/Main.astro

@@ -1,5 +1,5 @@
 ---
-import Breadcrumbs from "@components/Breadcrumbs.astro";
+import Breadcrumb from "@/components/Breadcrumb.astro";
 
 interface StringTitleProp {
   pageTitle: string;
@@ -17,32 +17,20 @@ export type Props = StringTitleProp | ArrayTitleProp;
 const { props } = Astro;
 ---
 
-<Breadcrumbs />
-<main id="main-content">
+<Breadcrumb />
+<main id="main-content" class="mx-auto w-full max-w-3xl px-4 pb-4">
   {
     "titleTransition" in props ? (
-      <h1>
+      <h1 class="text-2xl font-semibold sm:text-3xl">
         {props.pageTitle[0]}
         <span transition:name={props.titleTransition}>
           {props.pageTitle[1]}
         </span>
       </h1>
     ) : (
-      <h1>{props.pageTitle}</h1>
+      <h1 class="text-2xl font-semibold sm:text-3xl">{props.pageTitle}</h1>
     )
   }
-  <p>{props.pageDesc}</p>
+  <p class="mt-2 mb-6 italic">{props.pageDesc}</p>
   <slot />
 </main>
-
-<style>
-  #main-content {
-    @apply mx-auto w-full max-w-3xl px-4 pb-4;
-  }
-  #main-content h1 {
-    @apply text-2xl font-semibold sm:text-3xl;
-  }
-  #main-content p {
-    @apply mb-6 mt-2 italic;
-  }
-</style>