build!: upgrade to Tailwind CSS v4

src/components/Tag.astro

@@ -1,4 +1,6 @@
 ---
+import IconHash from "@/assets/icons/IconHash.svg";
+
 export interface Props {
   tag: string;
   tagName: string;
@@ -9,31 +11,26 @@ const { tag, tagName, size = "sm" } = Astro.props;
 ---
 
 <li
-  class={`inline-block ${
-    size === "sm" ? "my-1 underline-offset-4" : "my-3 mx-1 underline-offset-8"
-  }`}
+  class:list={[
+    "group inline-block group-hover:cursor-pointer",
+    size === "sm" ? "my-1 underline-offset-4" : "mx-1 my-3 underline-offset-8",
+  ]}
 >
   <a
     href={`/tags/${tag}/`}
     transition:name={tag}
-    class={`${size === "sm" ? "text-sm" : "text-lg"} pr-2 group`}
+    class:list={[
+      "relative pr-2 text-lg underline decoration-dashed group-hover:-top-0.5 group-hover:text-accent focus-visible:p-1",
+      { "text-sm": size === "sm" },
+    ]}
   >
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      class={`${size === "sm" ? " scale-75" : "scale-110"}`}
-      ><path
-        d="M16.018 3.815 15.232 8h-4.966l.716-3.815-1.964-.37L8.232 8H4v2h3.857l-.751 4H3v2h3.731l-.714 3.805 1.965.369L8.766 16h4.966l-.714 3.805 1.965.369.783-4.174H20v-2h-3.859l.751-4H21V8h-3.733l.716-3.815-1.965-.37zM14.106 14H9.141l.751-4h4.966l-.752 4z"
-      ></path>
-    </svg>
+    <IconHash
+      class:list={[
+        "inline-block opacity-80",
+        { "-mr-3.5 size-4": size === "sm" },
+        { "-mr-5 size-6": size === "lg" },
+      ]}
+    />
     &nbsp;<span>{tagName}</span>
   </a>
 </li>
-
-<style>
-  a {
-    @apply relative underline decoration-dashed hover:-top-0.5 hover:text-skin-accent focus-visible:p-1;
-  }
-  a svg {
-    @apply -mr-5 h-6 w-6 scale-95 text-skin-base opacity-80 group-hover:fill-skin-accent;
-  }
-</style>