refactor: ⬆️ Upgrade to Tailwind v4

components/ui/card/Card.vue

@@ -8,14 +8,11 @@ const props = defineProps<{
 </script>
 
 <template>
-    <div
-        :class="
-            cn(
-                'rounded-lg border bg-card text-card-foreground shadow-sm flex flex-col gap-6 p-4 items-center justify-center',
-                props.class
-            )
-        "
-    >
+    <div data-slot="card" :class="cn(
+        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+        props.class,
+    )
+        ">
         <slot />
     </div>
 </template>

components/ui/card/CardAction.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from "vue";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <div
+    data-slot="card-action"
+    :class="cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', props.class)"
+  >
+    <slot />
+  </div>
+</template>

components/ui/card/CardContent.vue

@@ -8,7 +8,10 @@ const props = defineProps<{
 </script>
 
 <template>
-    <div :class="cn('flex flex-col gap-2', props.class)">
-        <slot />
-    </div>
+  <div
+    data-slot="card-content"
+    :class="cn('px-6', props.class)"
+  >
+    <slot />
+  </div>
 </template>

components/ui/card/CardDescription.vue

@@ -8,7 +8,10 @@ const props = defineProps<{
 </script>
 
 <template>
-  <p :class="cn('text-sm text-muted-foreground', props.class)">
+  <p
+    data-slot="card-description"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+  >
     <slot />
   </p>
 </template>

components/ui/card/CardFooter.vue

@@ -8,7 +8,10 @@ const props = defineProps<{
 </script>
 
 <template>
-    <div :class="cn('flex items-center', props.class)">
-        <slot />
-    </div>
+  <div
+    data-slot="card-footer"
+    :class="cn('flex items-center px-6 [.border-t]:pt-6', props.class)"
+  >
+    <slot />
+  </div>
 </template>

components/ui/card/CardHeader.vue

@@ -8,7 +8,10 @@ const props = defineProps<{
 </script>
 
 <template>
-    <div :class="cn('flex flex-col gap-y-1.5', props.class)">
-        <slot />
-    </div>
+  <div
+    data-slot="card-header"
+    :class="cn('@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6', props.class)"
+  >
+    <slot />
+  </div>
 </template>

components/ui/card/CardTitle.vue

@@ -9,9 +9,8 @@ const props = defineProps<{
 
 <template>
   <h3
-    :class="
-      cn('text-2xl font-semibold leading-none tracking-tight', props.class)
-    "
+    data-slot="card-title"
+    :class="cn('leading-none font-semibold', props.class)"
   >
     <slot />
   </h3>

components/ui/card/index.ts

@@ -1,4 +1,5 @@
 export { default as Card } from "./Card.vue";
+export { default as CardAction } from "./CardAction.vue";
 export { default as CardContent } from "./CardContent.vue";
 export { default as CardDescription } from "./CardDescription.vue";
 export { default as CardFooter } from "./CardFooter.vue";