Proper migration for Tailwind 4

jeremy-clearlabs · jeremy-clearlabs · commit 9cbd8f8deb9f · 2025-02-27T10:10:32.000-08:00
diff --git a/src/components/Animation.svelte b/src/components/Animation.svelte
@@ -12,7 +12,7 @@
 </script>
 
 <button
-  class="my-2 px-2 border-slate-800 dark:border-slate-200 border-2 rounded hover:bg-purple-500"
+  class="my-2 px-2 border-slate-800 dark:border-slate-200 border-2 rounded-sm hover:bg-purple-500"
   onclick={addItem}>Add Item</button
 >
 
@@ -21,7 +21,7 @@
     <li transition:slide={{ duration: 200 }}>
       {item}
       <button
-        class="my-2 px-2 border-slate-800 dark:border-slate-200 border-2 rounded hover:bg-purple-500"
+        class="my-2 px-2 border-slate-800 dark:border-slate-200 border-2 rounded-sm hover:bg-purple-500"
         onclick={() => removeItem(index)}>Remove</button
       >
     </li>
diff --git a/src/components/Carousel.astro b/src/components/Carousel.astro
@@ -34,16 +34,16 @@
       <button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 5" data-carousel-slide-to="4"></button>
   </div>
   <!-- Slider controls -->
-  <button type="button" class="absolute top-0 start-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none" data-carousel-prev>
-      <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
+  <button type="button" class="absolute top-0 start-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-hidden" data-carousel-prev>
+      <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-hidden">
           <svg class="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
               <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4"/>
           </svg>
           <span class="sr-only">Previous</span>
       </span>
   </button>
-  <button type="button" class="absolute top-0 end-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none" data-carousel-next>
-      <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
+  <button type="button" class="absolute top-0 end-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-hidden" data-carousel-next>
+      <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-hidden">
           <svg class="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
               <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
           </svg>
diff --git a/src/components/CounterButtons.svelte b/src/components/CounterButtons.svelte
@@ -13,11 +13,11 @@
 <main>
   <h3>The count is {count}</h3>
   <button
-    class="my-2 border-slate-800 dark:border-slate-200 border-2 rounded hover:bg-purple-500"
+    class="my-2 border-slate-800 dark:border-slate-200 border-2 rounded-sm hover:bg-purple-500"
     onclick={decrement}>-</button
   >
   <button
-    class="my-2 border-slate-800 dark:border-slate-200 border-2 rounded hover:bg-purple-500"
+    class="my-2 border-slate-800 dark:border-slate-200 border-2 rounded-sm hover:bg-purple-500"
     onclick={increment}>+</button
   >
 
diff --git a/src/components/CurationItem.astro b/src/components/CurationItem.astro
@@ -11,7 +11,7 @@ const { Content } = await item.render();
 ---
 
 <li
-  class="bg-white dark:bg-slate-800 rounded-lg px-6 py-8 ring-1 ring-slate-900/5 shadow-xl flex-grow-0 flex-[48%]"
+  class="bg-white dark:bg-slate-800 rounded-lg px-6 py-8 ring-1 ring-slate-900/5 shadow-xl grow-0 flex-[48%]"
 >
   <a
     class="hover:grayscale"
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -48,7 +48,7 @@ const today = new Date();
           ☕️ Buy me a coffee
         </button>
       </a>
-      <ul class="flex gap-2 list-none m-0 p-0">
+      <ul class="flex flex-wrap md:flex-nowrap gap-2 list-none m-0 p-0">
         <FooterSocialItem
           class="col-span-1 px-4 py-2 border-2 rounded-full flex gap-2 items-center"
           link="mailto:jeremy@craftbyzen.com"
diff --git a/src/components/GuitarFingering.svelte b/src/components/GuitarFingering.svelte
@@ -154,7 +154,7 @@
 <div class="grid grid-cols-6 gap-4">
   {#each notes as note}
     <div
-      class="col-span-3 sm:col-span-2 md:col-span-1 flex items-center ps-4 border border-gray-200 rounded dark:border-gray-700"
+      class="col-span-3 sm:col-span-2 md:col-span-1 flex items-center ps-4 border border-gray-200 rounded-sm dark:border-gray-700"
     >
       <input
         class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
@@ -183,7 +183,7 @@
   <div class="grid grid-cols-6 gap-8">
     {#each options as option}
       <div
-        class="col-span-3 sm:col-span-2 md:col-span-1 flex items-center ps-4 border border-gray-200 rounded dark:border-gray-700"
+        class="col-span-3 sm:col-span-2 md:col-span-1 flex items-center ps-4 border border-gray-200 rounded-sm dark:border-gray-700"
       >
         <input
           class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
diff --git a/src/components/HolidayCalendar.svelte b/src/components/HolidayCalendar.svelte
@@ -50,17 +50,17 @@
     {maxValue}
     {minValue}
     numberOfMonths={1}
-    class="rounded-md border shadow calendar-container"
+    class="rounded-md border border-gray-200 shadow-sm calendar-container"
     {isDateUnavailable}
   />
   <button
-    class="px-2 my-2 border-slate-800 dark:border-slate-200 border-2 rounded hover:bg-purple-500 disabled:opacity-50 disabled:cursor-not-allowed"
+    class="px-2 my-2 border-slate-800 dark:border-slate-200 border-2 rounded-sm hover:bg-purple-500 disabled:opacity-50 disabled:cursor-not-allowed"
     disabled={value?.toString() === today(getLocalTimeZone()).toString()}
     on:click={() => (value = today(getLocalTimeZone()))}>Return to today</button
   >
 
   {#if selectedHolidays.length > 0}
-    <div class="p-4 border rounded-md space-y-2">
+    <div class="p-4 border border-gray-200 rounded-md space-y-2">
       <h3 class="font-semibold text-lg">
         Holidays on {value?.toString()}
       </h3>
@@ -77,7 +77,7 @@
       </div>
     </div>
   {:else}
-    <div class="p-4 border rounded-md space-y-2">
+    <div class="p-4 border border-gray-200 rounded-md space-y-2">
       <h3 class="font-semibold text-lg">
         No holidays on {value?.toString()}
       </h3>
diff --git a/src/components/HomePageAntiBookItem.astro b/src/components/HomePageAntiBookItem.astro
@@ -12,7 +12,7 @@ const { pubDate, title, heroImage, heroImageAlt, blurb, author } = data;
 ---
 
 <div
-  class="prose dark:prose-invert !max-w-none prose-p:m-0 grid grid-cols-8 gap-2 mb-6 md:mb-0 rounded-sm box-border dark:text-white"
+  class="prose dark:prose-invert !max-w-none prose-p:m-0 grid grid-cols-8 gap-2 mb-6 md:mb-0 rounded-xs box-border dark:text-white"
 >
   <div class="col-span-5 sm:col-span-6 md:py-0 md:px-0 md:mt-0">
     <div class="mb-2">
diff --git a/src/components/HomePageBookItem.astro b/src/components/HomePageBookItem.astro
@@ -12,7 +12,7 @@ const { pubDate, title, heroImage, heroImageAlt, blurb, author } = data;
 ---
 
 <div
-  class="prose dark:prose-invert !max-w-none prose-p:m-0 grid grid-cols-8 gap-2 mb-6 md:mb-0 rounded-sm box-border dark:text-white"
+  class="prose dark:prose-invert !max-w-none prose-p:m-0 grid grid-cols-8 gap-2 mb-6 md:mb-0 rounded-xs box-border dark:text-white"
 >
   <div class="col-span-5 sm:col-span-6 md:py-0 md:px-0 md:mt-0">
     <div class="mb-2">
diff --git a/src/components/HomePageCurationItem.astro b/src/components/HomePageCurationItem.astro
@@ -9,7 +9,7 @@ const { item } = Astro.props;
 ---
 
 <li
-  class="grid grid-cols-8 gap-2 mb-6 md:mb-0 rounded-sm box-border dark:text-white"
+  class="grid grid-cols-8 gap-2 mb-6 md:mb-0 rounded-xs box-border dark:text-white"
 >
   <div class="col-span-3 sm:col-span-2">
     <a
diff --git a/src/components/HomePageFilmItem.astro b/src/components/HomePageFilmItem.astro
@@ -12,7 +12,7 @@ const { pubDate, title, heroImage, heroImageAlt, blurb, creator, releaseYear } =
 ---
 
 <div
-  class="prose dark:prose-invert !max-w-none prose-p:m-0 grid grid-cols-8 gap-2 mb-6 md:mb-0 rounded-sm box-border dark:text-white"
+  class="prose dark:prose-invert !max-w-none prose-p:m-0 grid grid-cols-8 gap-2 mb-6 md:mb-0 rounded-xs box-border dark:text-white"
 >
   <div class="col-span-5 sm:col-span-6 md:py-0 md:px-0 md:mt-0">
     <div class="mb-2">
diff --git a/src/components/HomePageInspirationItem.astro b/src/components/HomePageInspirationItem.astro
@@ -12,7 +12,7 @@ const { data, slug } = item;
 const { pubDate, updatedDate, title, description } = data;
 ---
 
-<div class="mb-6 md:mb-0 rounded-sm box-border dark:text-white">
+<div class="mb-6 md:mb-0 rounded-xs box-border dark:text-white">
   <div>
     <div
       class="prose dark:prose-invert !max-w-none prose-p:m-0 line-clamp-4 md:line-clamp-5"
diff --git a/src/components/HomePageLogItem.astro b/src/components/HomePageLogItem.astro
@@ -15,7 +15,7 @@ const { Content } = await item.render();
 ---
 
 <div
-  class="grid grid-cols-8 gap-2 mb-6 md:mb-0 rounded-sm box-border dark:text-white"
+  class="grid grid-cols-8 gap-2 mb-6 md:mb-0 rounded-xs box-border dark:text-white"
 >
   <div class="col-span-5 sm:col-span-6">
     <div
diff --git a/src/components/HomePageProjectItem.astro b/src/components/HomePageProjectItem.astro
@@ -13,7 +13,7 @@ const { pubDate, title, coverImage, imageAlt, description, updatedDate } = data;
 ---
 
 <div
-  class="prose dark:prose-invert !max-w-none prose-p:m-0 grid grid-cols-8 gap-2 mb-6 md:mb-0 rounded-sm box-border dark:text-white"
+  class="prose dark:prose-invert !max-w-none prose-p:m-0 grid grid-cols-8 gap-2 mb-6 md:mb-0 rounded-xs box-border dark:text-white"
 >
   <div class="col-span-5 sm:col-span-6 md:py-0 md:px-0 md:mt-0">
     <a
diff --git a/src/components/HomePageSide.astro b/src/components/HomePageSide.astro
@@ -115,7 +115,7 @@ const toPascalCase = (tag: string): string => {
       <button
         type="submit"
         value="Subscribe"
-        class="bg-yellow-700 hover:bg-purple-700 dark:bg-yellow-300 text-white dark:text-black font-bold px-4 rounded"
+        class="bg-yellow-700 hover:bg-purple-700 dark:bg-yellow-300 text-white dark:text-black font-bold px-4 rounded-sm"
         >Subscribe</button
       >
       <a
diff --git a/src/components/MarkdownPreview.svelte b/src/components/MarkdownPreview.svelte
@@ -99,14 +99,14 @@
   <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
     <div class="editor">
       <textarea
-        class="w-full h-[500px] p-4 border rounded"
+        class="w-full h-[500px] p-4 border border-gray-200 rounded-sm"
         bind:value={markdownInput}
         on:input={updatePreview}
         placeholder="Type your markdown here..."
       ></textarea>
     </div>
     <div class="preview">
-      <div class="w-full h-[500px] p-4 border rounded overflow-auto">
+      <div class="w-full h-[500px] p-4 border border-gray-200 rounded-sm overflow-auto">
         {@html renderedOutput}
       </div>
     </div>
diff --git a/src/components/MovieGallery.astro b/src/components/MovieGallery.astro
@@ -28,7 +28,7 @@ const { movies = [] } = Astro.props;
               <span class="text-gray-600">No Poster Available</span>
             </div>
           )}
-          <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 transition-opacity duration-300 flex items-end justify-center">
+          <div class="absolute inset-0 bg-black/0 group-hover:bg-black/60 transition-opacity duration-300 flex items-end justify-center">
             <h3 class="not-prose text-white md:text-lg font-semibold p-0.5 md:p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
               {movie.title}
             </h3>
diff --git a/src/components/ProseArticle.astro b/src/components/ProseArticle.astro
@@ -26,10 +26,10 @@ const { class: className } = Astro.props;
     @apply opacity-100;
   }
   .heading-link {
-    @apply hidden md:inline md:opacity-0 relative;
+    @apply hidden relative;
   }
   .heading-link svg {
-    @apply absolute top-1/2 -translate-y-1/2 -left-7;
+    @apply absolute top-1/2 -translate-y-1/2;
   }
 
   .external-link {
diff --git a/src/components/Transition.svelte b/src/components/Transition.svelte
@@ -3,7 +3,7 @@
   let isVisible = $state(true);
 </script>
 
-<button class="my-2 px-2 border-slate-800 dark:border-slate-200 border-2 rounded hover:bg-purple-500" onclick={() => (isVisible = !isVisible)}>
+<button class="my-2 px-2 border-slate-800 dark:border-slate-200 border-2 rounded-sm hover:bg-purple-500" onclick={() => (isVisible = !isVisible)}>
   Toggle
 </button>
 
diff --git a/src/components/Uuid.svelte b/src/components/Uuid.svelte
@@ -47,19 +47,20 @@
 
 <div>
   <p
-    class="border-2 text-center px-2 py-4 border-slate-800 dark:border-slate-200 rounded"
+    class="border-2 text-center px-2 py-4 border-slate-800 dark:border-slate-200 rounded-sm"
   >
     Generated UUID: {uuid}
   </p>
   <div class="flex align-middle gap-4">
     <button
-      class="px-2 my-2 border-slate-800 dark:border-slate-200 border-2 rounded hover:bg-purple-500"
+      class="px-2 my-2 border-slate-800 dark:border-slate-200 border-2 rounded-sm hover:bg-purple-500"
       onclick={() => (uuid = generateUUID())}>Generate New UUID</button
     >
     <div class="relative">
       <button
-        class="px-2 py-1 my-2 border-slate-800 dark:border-slate-200 border-2 rounded hover:bg-purple-500"
+        class="px-2 py-1 my-2 border-slate-800 dark:border-slate-200 border-2 rounded-sm hover:bg-purple-500"
         onclick={() => copyToClipboard(uuid)}
+        aria-label="Copy to clipboard"
       >
         <svg
           width="30px"
diff --git a/src/components/WebsitePinger.svelte b/src/components/WebsitePinger.svelte
@@ -72,14 +72,14 @@
   <button
     onclick={handlePing}
     disabled={isLoading}
-    class="px-2 my-2 border-slate-800 dark:border-slate-200 border-2 rounded hover:bg-purple-500"
+    class="px-2 my-2 border-slate-800 dark:border-slate-200 border-2 rounded-sm hover:bg-purple-500"
   >
     {isLoading ? "Pinging..." : "Ping Websites"}
   </button>
 
   {#if error}
     <div
-      class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
+      class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-sm relative"
       role="alert"
     >
       <strong class="font-bold">Error!</strong>
@@ -91,7 +91,7 @@
     <div class="space-y-2">
       <button
         onclick={downloadCSV}
-        class="px-2 my-2 border-slate-800 dark:border-slate-200 border-2 rounded hover:bg-purple-500"
+        class="px-2 my-2 border-slate-800 dark:border-slate-200 border-2 rounded-sm hover:bg-purple-500"
       >
         Download Results (CSV)
       </button>
diff --git a/src/components/ui/badge/badge.svelte b/src/components/ui/badge/badge.svelte
@@ -2,7 +2,7 @@
 	import { type VariantProps, tv } from "tailwind-variants";
 
 	export const badgeVariants = tv({
-		base: "focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
+		base: "focus:ring-3 focus:ring-blue-500 inline-flex items-center rounded-full border border-gray-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2",
 		variants: {
 			variant: {
 				default:
diff --git a/src/components/ui/button/button.svelte b/src/components/ui/button/button.svelte
@@ -4,7 +4,7 @@
 	import { type VariantProps, tv } from "tailwind-variants";
 
 	export const buttonVariants = tv({
-		base: "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+		base: "ring-offset-background focus-visible:ring-3 focus-visible:ring-blue-500 inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
 		variants: {
 			variant: {
 				default: "bg-primary text-primary-foreground hover:bg-primary/90",
diff --git a/src/content/series/2024-02-01-series-4.md b/src/content/series/2024-02-01-series-4.md
@@ -39,7 +39,7 @@ If you like what you're reading, share this newsletter. You could go as far as s
   <button
     type="submit"
     value="Subscribe"
-    class="bg-yellow-700 hover:bg-purple-700 dark:bg-yellow-300 text-white dark:text-black font-bold px-4 rounded"
+    class="bg-yellow-700 hover:bg-purple-700 dark:bg-yellow-300 text-white dark:text-black font-bold px-4 rounded-sm"
     >Subscribe</button
   >
   <a
diff --git a/src/content/writing/2017-02-19-interview-prep.md b/src/content/writing/2017-02-19-interview-prep.md
@@ -69,7 +69,7 @@ The following is the initial exchange of what areas she wanted to focus on.
 
 > These areas I am more unsure about, in regards to what kind of information they would want.
 > We didn't go very deeply into the concept of REST APIs during the bootcamp itself, any explanations were usually in optional sections of the platform.
-> My best guess, based on the curriculum, is they would be satisfied with a well-rounded overview/definition of what REST is and why its used.
+> My best guess, based on the curriculum, is they would be satisfied with a well-rounded-sm overview/definition of what REST is and why its used.
 > Additionally, explaining implementation of RESTful Routing in a framework such as Rails or Django (more semi-RESTful for the latter).
 
 > And there is a small chance they may ask me about APIs, which can be as general as "What is an API?" and "How are they used?" or as specific as providing an example of API usage with AJAX and jQuery.
diff --git a/src/content/writing/2024-02-01-newsletter-announcement.md b/src/content/writing/2024-02-01-newsletter-announcement.md
@@ -35,7 +35,7 @@ With that, I'm going to send my first newsletter sometime in February, so make s
   <button
     type="submit"
     value="Subscribe"
-    class="bg-yellow-700 hover:bg-purple-700 dark:bg-yellow-300 text-white dark:text-black font-bold px-4 rounded"
+    class="bg-yellow-700 hover:bg-purple-700 dark:bg-yellow-300 text-white dark:text-black font-bold px-4 rounded-sm"
     >Subscribe</button
   >
   <a
diff --git a/src/content/writing/2025-01-09-w01-weekly-notes.md b/src/content/writing/2025-01-09-w01-weekly-notes.md
@@ -153,7 +153,7 @@ Tim Urban's idea of a controlled dopamine hit makes a lot of sense to me. Maybe
 
 - Tim Urban on X: "24 thoughts that gave me a dopamine hit this year" - [X thread](https://twitter.com/waitbutwhy/status/1874207852988137776)
 
-Rounded up resources regarding Ollama
+rounded-sm up resources regarding Ollama
 
 <iframe
   class="aspect-video w-full my-2"
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
@@ -187,7 +187,7 @@ const newsletterSeriesTitle = newsletterSeriesData?.title ?? "";
                 <button
                   type="submit"
                   value="Subscribe"
-                  class="bg-yellow-700 hover:bg-purple-700 dark:bg-yellow-300 text-white dark:text-black font-bold px-4 rounded"
+                  class="bg-yellow-700 hover:bg-purple-700 dark:bg-yellow-300 text-white dark:text-black font-bold px-4 rounded-sm"
                 >
                   Subscribe
                 </button>
diff --git a/src/pages/about/press.astro b/src/pages/about/press.astro
@@ -15,7 +15,7 @@ import ProseArticle from "../../components/ProseArticle.astro";
         <li>
           <div class="flex flex-col md:flex-row">
             <FormattedDate
-              class="italic pe-4 flex-shrink-0 flex-grow-0 md:basis-[150px]"
+              class="italic pe-4 shrink-0 grow-0 md:basis-[150px]"
               date={new Date("2019-01-15")}
             />
             <div>
@@ -29,7 +29,7 @@ import ProseArticle from "../../components/ProseArticle.astro";
         <li>
           <div class="flex flex-col md:flex-row">
             <FormattedDate
-              class="italic pe-4 flex-shrink-0 flex-grow-0 md:basis-[150px]"
+              class="italic pe-4 shrink-0 grow-0 md:basis-[150px]"
               date={new Date("2017-12-12")}
             />
             <div>
@@ -45,7 +45,7 @@ import ProseArticle from "../../components/ProseArticle.astro";
         <li>
           <div class="flex flex-col md:flex-row">
             <FormattedDate
-              class="italic pe-4 flex-shrink-0 flex-grow-0 md:basis-[150px]"
+              class="italic pe-4 shrink-0 grow-0 md:basis-[150px]"
               date={new Date("2017-11-02")}
             />
             <div>DevBootcamp: "Hands-on React Lunch and Learn".</div>
@@ -55,7 +55,7 @@ import ProseArticle from "../../components/ProseArticle.astro";
           <div class="flex flex-col md:flex-row">
             <time
               datetime={new Date("2015-11-24").toISOString()}
-              class="italic pe-4 flex-shrink-0 flex-grow-0 md:basis-[150px]"
+              class="italic pe-4 shrink-0 grow-0 md:basis-[150px]"
             >
               {
                 new Date("2015-11-24").toLocaleDateString("en-us", {
diff --git a/src/pages/curation/antibooks/index.astro b/src/pages/curation/antibooks/index.astro
diff --git a/src/pages/curation/books/index.astro b/src/pages/curation/books/index.astro
diff --git a/src/pages/curation/businesscards/index.astro b/src/pages/curation/businesscards/index.astro
diff --git a/src/pages/curation/classified/index.astro b/src/pages/curation/classified/index.astro
diff --git a/src/pages/curation/creators/index.astro b/src/pages/curation/creators/index.astro
diff --git a/src/pages/curation/films/index.astro b/src/pages/curation/films/index.astro
diff --git a/src/pages/curation/lindy/index.astro b/src/pages/curation/lindy/index.astro
diff --git a/src/pages/curation/newsletter/[...slug].astro b/src/pages/curation/newsletter/[...slug].astro
diff --git a/src/pages/curation/newsletter/index.astro b/src/pages/curation/newsletter/index.astro
diff --git a/src/pages/subscribe.astro b/src/pages/subscribe.astro
diff --git a/src/styles/app.css b/src/styles/app.css
diff --git a/src/styles/global.css b/src/styles/global.css

Original file line number	Diff line number	Diff line change
`@@ -13,11 +13,11 @@`
`13`	`13`	`<main>`
`14`	`14`	`<h3>The count is {count}</h3>`
`15`	`15`	`<button`
`16`		`- class="my-2 border-slate-800 dark:border-slate-200 border-2 rounded hover:bg-purple-500"`
	`16`	`+ class="my-2 border-slate-800 dark:border-slate-200 border-2 rounded-sm hover:bg-purple-500"`
`17`	`17`	`onclick={decrement}>-</button`
`18`	`18`	`>`
`19`	`19`	`<button`
`20`		`- class="my-2 border-slate-800 dark:border-slate-200 border-2 rounded hover:bg-purple-500"`
	`20`	`+ class="my-2 border-slate-800 dark:border-slate-200 border-2 rounded-sm hover:bg-purple-500"`
`21`	`21`	`onclick={increment}>+</button`
`22`	`22`	`>`
`23`	`23`
Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@ const { Content } = await item.render();`
`11`	`11`	`---`
`12`	`12`
`13`	`13`	`<li`
`14`		`- class="bg-white dark:bg-slate-800 rounded-lg px-6 py-8 ring-1 ring-slate-900/5 shadow-xl flex-grow-0 flex-[48%]"`
	`14`	`+ class="bg-white dark:bg-slate-800 rounded-lg px-6 py-8 ring-1 ring-slate-900/5 shadow-xl grow-0 flex-[48%]"`
`15`	`15`	`>`
`16`	`16`	`<a`
`17`	`17`	`class="hover:grayscale"`
Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@ const { pubDate, title, heroImage, heroImageAlt, blurb, author } = data;`
`12`	`12`	`---`
`13`	`13`
`14`	`14`	`<div`
`15`		`- class="prose dark:prose-invert !max-w-none prose-p:m-0 grid grid-cols-8 gap-2 mb-6 md:mb-0 rounded-sm box-border dark:text-white"`
	`15`	`+ class="prose dark:prose-invert !max-w-none prose-p:m-0 grid grid-cols-8 gap-2 mb-6 md:mb-0 rounded-xs box-border dark:text-white"`
`16`	`16`	`>`
`17`	`17`	`<div class="col-span-5 sm:col-span-6 md:py-0 md:px-0 md:mt-0">`
`18`	`18`	`<div class="mb-2">`
Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,7 @@ const { item } = Astro.props;`
`9`	`9`	`---`
`10`	`10`
`11`	`11`	`<li`
`12`		`- class="grid grid-cols-8 gap-2 mb-6 md:mb-0 rounded-sm box-border dark:text-white"`
	`12`	`+ class="grid grid-cols-8 gap-2 mb-6 md:mb-0 rounded-xs box-border dark:text-white"`
`13`	`13`	`>`
`14`	`14`	`<div class="col-span-3 sm:col-span-2">`
`15`	`15`	`<a`