Tailwind migration post

src/components/Card.astro

@@ -27,9 +27,9 @@ const borderRadius = borderRadiusMap[radius];
 ---
 
 <Element class:list={[
-    'p-4 border bg-white border-zinc-200 dark:bg-[#0E1215] dark:border-gray-800 transition',
+    'p-4 border bg-white border-zinc-200 dark:bg-[#0E1215] dark:border-gray-800',
     {
-        'hover:shadow hover:scale-102': includeHover,
+        'hover:shadow hover:scale-102 transition': includeHover,
     },
     borderRadius,
     className

src/components/Markdown/Color.astro

@@ -0,0 +1,11 @@
+---
+type Props = {
+    color: string;
+    label?: string;
+};
+
+const { color, label } = Astro.props;
+---
+<code
+    class="before:inline-block before:h-[1em] before:aspect-square before:bg-(--color) before:me-1 text-inherit before:align-[-1px]"
+    style={{ '--color': color }}>{label || color}</code>

src/components/Markdown/Grid.astro

@@ -1,18 +1,30 @@
 ---
 type Props = {
-    columns: number[];
+    columns?: number[];
+    gap?: number | string;
+    cols?: number | string;
 };
 
-const { columns } = Astro.props;
-const templateColumns = columns.map(column => `${column}fr`).join(' ');
+const { columns, gap, cols } = Astro.props;
+
+
+const cssVars: Record<string, string> = {};
+
+if (columns) {
+    cssVars['--grid-cols'] = columns.map(column => `${column}fr`).join(' ');
+} else if (cols) {
+    cssVars['--grid-cols'] = `repeat(${cols.toString()}, minmax(0, 1fr))`;
+}
+
+if (gap) {
+    cssVars['--grid-gap'] = `calc(var(--spacing) * ${gap.toString()})`;
+}
+
 ---
 
 <div
-    class="grid text-center"
-    style={{
-        '--bs-columns': columns.length,
-        'grid-template-columns': templateColumns,
-    }}>
+    class="grid text-center gap-(--grid-gap) grid-cols-(--grid-cols)"
+    style={cssVars}>
 
     <slot />
 

src/components/StatBlock.astro

@@ -0,0 +1,53 @@
+---
+type ColorSchemes = 'purple' | 'green' | 'red' | 'orange';
+
+type Props = {
+    title?: string;
+    label?: string;
+    class?: string;
+    color: ColorSchemes;
+};
+
+const {
+    title,
+    label,
+    color,
+    class: className = '',
+    ...props
+} = Astro.props;
+
+const colorSchemes: Record<ColorSchemes, string> = {
+    'purple': '**:text-violet-500 dark:**:text-violet-400',
+    'green': '**:text-green-700',
+    'red': '**:text-red-700 dark:**:text-red-800',
+    'orange': '**:text-amber-600 dark:**:text-amber-700',
+};
+---
+<div
+    class:list={[
+        'text-center',
+        className,
+    ]}
+    {...props}
+>
+
+    {title && (
+        <div class="text-xs text-slate-500">
+            {title}
+        </div>
+    )}
+
+    <div class:list={[
+        'text-3xl font-extrabold **:mb-0 my-3',
+        colorSchemes[color],
+    ]}>
+        <slot />
+    </div>
+
+    {label && (
+        <div class="text-xs text-slate-500">
+            {label}
+        </div>
+    )}
+
+</div>