upgrade to tailwind 4

astro.config.mjs

@@ -1,5 +1,5 @@
 import { defineConfig } from 'astro/config';
-import tailwind from '@astrojs/tailwind';
+import tailwindcss from '@tailwindcss/vite';
 import react from '@astrojs/react';
 
 const getSiteURL = () => {
@@ -11,5 +11,11 @@ const getSiteURL = () => {
 
 export default defineConfig({
   site: getSiteURL(),
-  integrations: [tailwind(), react()],
+  integrations: [tailwindcss(), react()],
-});
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+  vite: {
+    plugins: [tailwindcss()]
+  }
+});

package.json

@@ -16,17 +16,18 @@
     "@astrojs/react": "^4.3.0",
     "@astrojs/rss": "^4.0.12",
     "@astrojs/sitemap": "^3.4.1",
-    "@astrojs/tailwind": "^6.0.2",
     "@directus/sdk": "^19.1.0",
+    "@tailwindcss/vite": "^4.1.8",
+    "@tailwindcss/postcss": "^4.1.8",
     "astro": "^5.9.1",
     "framer-motion": "^12.16.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-hotkeys-hook": "^5.1.0",
     "react-icons": "^5.5.0",
-    "reading-time": "^1.5.0",
+    "postcss-preset-env": "^10.2.1",
     "sanitize-html": "^2.17.0",
-    "tailwindcss": "^3.0.24"
+    "tailwindcss": "^4.1.8"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.16",

postcss.config.mjs

@@ -1,7 +1,7 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
   plugins: {
-    tailwindcss: {},
+    "@tailwindcss/postcss": {},
     autoprefixer: {},
     'postcss-preset-env': {
       features: {

src/pages/blog/[...slug].astro

@@ -274,67 +274,67 @@ const { post, nextPost, prevPost } = Astro.props;
 
   /* Enhanced typography for blog content - Responsive adjustments */
   .prose {
-    @apply text-zinc-800 dark:text-zinc-200;
+    @reference text-zinc-800 dark:text-zinc-200;
   }
 
   .prose h1,
   .prose h2,
   .prose h3,
   .prose h4 {
-    @apply font-semibold text-zinc-900 dark:text-zinc-100;
+    @reference font-semibold text-zinc-900 dark:text-zinc-100;
   }
 
   .prose h1 {
-    @apply text-2xl sm:text-3xl md:text-4xl;
+    @reference text-2xl sm:text-3xl md:text-4xl;
   }
 
   .prose h2 {
-    @apply mb-3 mt-8 border-b border-zinc-200 pb-2 text-xl dark:border-zinc-800 sm:mb-4 sm:mt-12 sm:text-2xl;
+    @reference mb-3 mt-8 border-b border-zinc-200 pb-2 text-xl dark:border-zinc-800 sm:mb-4 sm:mt-12 sm:text-2xl;
   }
 
   .prose h3 {
-    @apply mb-2 mt-6 text-lg sm:mb-3 sm:mt-8 sm:text-xl;
+    @reference mb-2 mt-6 text-lg sm:mb-3 sm:mt-8 sm:text-xl;
   }
 
   .prose p {
-    @apply mb-4 text-sm leading-relaxed sm:mb-6 sm:text-base;
+    @reference mb-4 text-sm leading-relaxed sm:mb-6 sm:text-base;
   }
 
   .prose a {
-    @apply font-medium text-zinc-800 underline decoration-zinc-400 underline-offset-2 transition-colors hover:text-zinc-600 hover:decoration-zinc-600 dark:text-zinc-300 dark:decoration-zinc-600 dark:hover:text-zinc-100 dark:hover:decoration-zinc-400;
+    @reference font-medium text-zinc-800 underline decoration-zinc-400 underline-offset-2 transition-colors hover:text-zinc-600 hover:decoration-zinc-600 dark:text-zinc-300 dark:decoration-zinc-600 dark:hover:text-zinc-100 dark:hover:decoration-zinc-400;
   }
 
   .prose blockquote {
-    @apply my-4 border-l-4 border-zinc-300 pl-4 italic text-zinc-700 dark:border-zinc-700 dark:text-zinc-300 sm:my-6;
+    @reference my-4 border-l-4 border-zinc-300 pl-4 italic text-zinc-700 dark:border-zinc-700 dark:text-zinc-300 sm:my-6;
   }
 
   .prose code {
-    @apply rounded bg-zinc-100 px-1.5 py-0.5 text-sm font-medium text-zinc-800 dark:bg-zinc-800 dark:text-zinc-200;
+    @reference rounded bg-zinc-100 px-1.5 py-0.5 text-sm font-medium text-zinc-800 dark:bg-zinc-800 dark:text-zinc-200;
   }
 
   .prose pre {
-    @apply my-4 overflow-x-auto rounded-lg bg-[#1e293b] p-3 text-xs text-zinc-200 shadow-md dark:bg-[#1e293b] sm:my-6 sm:p-4 sm:text-sm !important;
+    @reference my-4 overflow-x-auto rounded-lg bg-[#1e293b] p-3 text-xs text-zinc-200 shadow-md dark:bg-[#1e293b] sm:my-6 sm:p-4 sm:text-sm !important;
   }
 
   .prose pre code {
-    @apply bg-transparent p-0 text-zinc-200 dark:text-zinc-200 !important;
+    @reference bg-transparent p-0 text-zinc-200 dark:text-zinc-200 !important;
   }
 
   .prose img {
-    @apply mx-auto my-6 h-auto max-w-full rounded-lg shadow-md sm:my-8;
+    @reference mx-auto my-6 h-auto max-w-full rounded-lg shadow-md sm:my-8;
   }
 
   .prose ul,
   .prose ol {
-    @apply my-4 pl-5 sm:my-6 sm:pl-6;
+    @reference my-4 pl-5 sm:my-6 sm:pl-6;
   }
 
   .prose li {
-    @apply mb-1 text-sm sm:mb-2 sm:text-base;
+    @reference mb-1 text-sm sm:mb-2 sm:text-base;
   }
 
   .prose hr {
-    @apply my-8 border-zinc-200 dark:border-zinc-800 sm:my-10;
+    @reference my-8 border-zinc-200 dark:border-zinc-800 sm:my-10;
   }
 
   /* Line clamp for truncating text */

src/styles/global.css

@@ -1,7 +1,5 @@
 /* Remove all the complex mobile menu styles and keep only what's necessary */
-@tailwind base;
+@import "tailwindcss";
-@tailwind components;
-@tailwind utilities;
 
 @layer base {
   :root {
@@ -17,7 +15,7 @@
   }
 
   body {
-    @apply min-h-screen bg-white text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100;
+    @reference min-h-screen bg-white text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100;
     margin: 0;
     padding: 0;
     overflow-x: hidden;
@@ -43,7 +41,7 @@
   /* Better touch targets on mobile */
   button,
   a {
-    @apply min-h-[44px];
+    @reference min-h-[44px];
   }
 }