build!: upgrade to Tailwind CSS v4

src/components/Socials.astro

@@ -1,7 +1,6 @@
 ---
-import { SOCIALS } from "@config";
+import { SOCIALS } from "@/constants";
 import LinkButton from "./LinkButton.astro";
-import socialIcons from "@assets/socialIcons";
 
 export interface Props {
   centered?: boolean;
@@ -10,26 +9,17 @@ export interface Props {
 const { centered = false } = Astro.props;
 ---
 
-<div class={`social-icons ${centered ? "flex" : ""}`}>
+<div class:list={["flex-wrap justify-center gap-1", { flex: centered }]}>
   {
-    SOCIALS.filter(social => social.active).map(social => (
+    SOCIALS.map(social => (
       <LinkButton
         href={social.href}
-        className="link-button"
+        class="p-2 hover:rotate-6 sm:p-1"
         title={social.linkTitle}
       >
-        <Fragment set:html={socialIcons[social.name]} />
+        <social.icon class="inline-block size-6 scale-125 fill-transparent stroke-current stroke-2 opacity-90 group-hover:fill-transparent sm:scale-110" />
         <span class="sr-only">{social.linkTitle}</span>
       </LinkButton>
     ))
   }
 </div>
-
-<style>
-  .social-icons {
-    @apply flex-wrap justify-center gap-1;
-  }
-  .link-button {
-    @apply p-2 hover:rotate-6 sm:p-1;
-  }
-</style>