Upgraded to tailwind 4

src/components/Button.astro

@@ -10,7 +10,7 @@ const { variant = 'secondary', glow = false, href } = Astro.props;
 
 {href && (
   <a
-    class="relative py-2 px-7 flex items-center gap-[0.5ch] rounded-[100vmax] text-[1em] transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4"
+    class="relative py-2 px-7 flex items-center gap-[0.5ch] rounded-[100vmax] text-[1em] transition-colors focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-4"
     href={href}
     target="_blank"
     class:list={
@@ -28,7 +28,7 @@ const { variant = 'secondary', glow = false, href } = Astro.props;
 )}
 {!href && (
   <button
-    class="relative py-2 px-7 flex items-center gap-[0.5ch] rounded-[100vmax] text-[1em] transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4"
+    class="relative py-2 px-7 flex items-center gap-[0.5ch] rounded-[100vmax] text-[1em] transition-colors focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-4"
     class:list={
       [
         {

src/components/Card.astro

@@ -1,4 +1,4 @@
-<div class="p-3 text-slate-200 bg-slate-900 border-[1px] border-slate-800 rounded">
+<div class="p-3 text-slate-200 bg-slate-900 border border-slate-800 rounded-sm">
   <div class="flex items-center gap-2">
     <slot name="icon" />
 

src/components/home/Hero.astro

@@ -18,7 +18,7 @@ import BgParticles from "./BgParticles.astro";
         </p>
       </div>
 
-      <hr class="my-4 w-12 mx-auto border-none h-[.33rem] rounded-[100vmax] bg-gradient-to-b from-emerald-500 to-emerald-600" />
+      <hr class="my-4 w-12 mx-auto border-none h-[.33rem] rounded-[100vmax] bg-linear-to-b from-emerald-500 to-emerald-600" />
 
       <div>
         <p class="md:text-xl">