MIgration to newer deps

Author: Carreau

astro.config.mjs

@@ -1,6 +1,6 @@
 import { defineConfig } from "astro/config";
 import react from "@astrojs/react";
-import tailwind from "@astrojs/tailwind";
+import tailwindcss from "@tailwindcss/vite";
 
 // Get base path from environment variable
 // For GitHub Pages: if repo is username.github.io, use "" (root)
@@ -23,7 +23,10 @@ const site = base
   : `https://${owner}.github.io`;
 
 export default defineConfig({
-  integrations: [react(), tailwind()],
+  integrations: [react()],
+  vite: {
+    plugins: [tailwindcss()],
+  },
   base: base,
   site: site,
   output: "static",

package-lock.json

@@ -9,20 +9,24 @@
     "preview": "astro preview"
   },
   "dependencies": {
-    "@astrojs/react": "^4.4.2",
-    "@astrojs/tailwind": "^6.0.2",
-    "astro": "^5.16.4",
+    "@astrojs/react": "^5.0.6",
+    "@tailwindcss/vite": "^4.3.0",
+    "astro": "^6.4.2",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
-    "tailwindcss": "^3.4.18"
+    "tailwindcss": "^4.3.0"
   },
   "devDependencies": {
     "@types/react": "^19.2.16",
     "@types/react-dom": "^19.2.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "jiti": "^2.7.0",
     "tailwind-merge": "^3.4.0",
     "tw-animate-css": "^1.4.0",
     "typescript": "^6.0.3"
+  },
+  "overrides": {
+    "vite": "^7"
   }
 }

package.json

@@ -1,4 +1,4 @@
 {
   "count": null,
-  "timestamp": 1780384819962
+  "timestamp": 1780410504634
 }

public/build-data-pr.json

@@ -1,5 +1,5 @@
 {
   "version": "9.14.0",
   "releaseDate": "May 29, 2026",
-  "timestamp": 1780384819963
+  "timestamp": 1780410504635
 }

public/build-data-pypi.json

@@ -1,7 +1,10 @@
-/* Import tw-animate-css for animations - must be first */
+/* Tailwind v4 — must come first to establish its layers */
+@import "tailwindcss";
+
+/* Animations (tw-animate-css is already v4-compatible) */
 @import "tw-animate-css";
 
-/* Import all theme files - must come before other CSS rules */
+/* Theme files (plain CSS overrides) */
 @import "./themes/purple.css";
 @import "./themes/orange.css";
 @import "./themes/pink.css";
@@ -17,9 +20,13 @@
 @import "./themes/velvet.css";
 @import "./themes/sun.css";
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+/* Load the existing JS theme config (colors / fonts / shadows / maxWidth …)
+   in v4 compatibility mode. */
+@config "../../tailwind.config.mjs";
+
+/* Class-based dark mode — v4 does NOT honor the JS config's darkMode key,
+   so the `.dark` variant must be declared here. */
+@custom-variant dark (&:where(.dark, .dark *));
 
 :root {
   color-scheme: light;
@@ -152,18 +159,23 @@ body {
   animation: slideInLeft 0.6s ease-out forwards;
 }
 
-/* Simplified gradient classes for sections */
+/* Section gradients as plain CSS (no dependency on Tailwind's gradient
+   internals, which changed in v4). Theme files override these per-theme. */
 .gradient-hero {
-  @apply bg-gradient-to-br from-theme-primary;
-  --tw-gradient-to: var(--theme-accent) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from),
-    var(--theme-secondary) var(--tw-gradient-via-position),
-    var(--theme-accent) var(--tw-gradient-to-position);
+  background-image: linear-gradient(
+    to bottom right,
+    var(--theme-primary),
+    var(--theme-secondary),
+    var(--theme-accent)
+  );
 }
 
 .gradient-header {
-  @apply bg-gradient-to-r from-theme-primary;
-  --tw-gradient-to: var(--theme-secondary) var(--tw-gradient-to-position);
+  background-image: linear-gradient(
+    to right,
+    var(--theme-primary),
+    var(--theme-secondary)
+  );
 }
 
 /* Simplified gradient classes with opacity for stats cards */
@@ -201,11 +213,19 @@ body {
 
 /* Text utilities */
 a {
-  @apply transition-colors duration-200 text-theme-primary hover:text-theme-secondary underline underline-offset-2;
+  @apply transition-colors duration-200 underline underline-offset-2;
+  color: var(--theme-primary);
+}
+a:hover {
+  color: var(--theme-secondary);
 }
 
 .prose a {
-  @apply text-theme-primary hover:text-theme-secondary font-medium;
+  @apply font-medium;
+  color: var(--theme-primary);
+}
+.prose a:hover {
+  color: var(--theme-secondary);
 }
 
 /* Code highlighting */
@@ -266,7 +286,9 @@ ol ul {
 }
 
 /* Gradient text for headers - use CSS variables for theme support */
-.gradient-text {
+.gradient-text,
+h2,
+h3 {
   background: linear-gradient(
     to right,
     var(--theme-primary),
@@ -281,11 +303,11 @@ ol ul {
 
 /* Gradient text for hero (brighter, contrasts with gradient bg) */
 .gradient-text-hero {
-  @apply bg-gradient-to-r from-white via-gray-100 to-white bg-clip-text text-transparent;
+  @apply bg-linear-to-r from-white via-gray-100 to-white bg-clip-text text-transparent;
 }
 
 .dark .gradient-text-hero {
-  @apply bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 bg-clip-text text-transparent;
+  @apply bg-linear-to-r from-gray-300 via-gray-200 to-gray-300 bg-clip-text text-transparent;
 }
 
 /* Theme-aware border colors */
@@ -335,13 +357,7 @@ ol ul {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-h2 {
-  @apply gradient-text;
-}
-
-h3 {
-  @apply gradient-text;
-}
+/* (h2/h3 gradient text is applied via the .gradient-text selector above) */
 
 /* Override gradient text for headers on gradient backgrounds */
 h1.text-white,
@@ -458,7 +474,9 @@ h3.text-white {
 }
 
 /* Headings large - 18 occurrences */
-.heading-lg {
+.heading-lg,
+section > div > h2,
+section > div > div > h2 {
   @apply text-3xl font-bold mb-4 text-gray-900 dark:text-white;
 }
 
@@ -506,11 +524,7 @@ h3.text-white {
   @apply w-6 h-6 text-white;
 }
 
-/* Section heading styles using child combinators */
-section > div > h2,
-section > div > div > h2 {
-  @apply heading-lg;
-}
+/* (section h2 sizing is applied via the .heading-lg selector above) */
 
 /* Centered section headings */
 .section-header {