Update components/tailwind-loader.tsx

components/tailwind-loader.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+// Extend Window interface to include tailwind
+declare global {
+  interface Window {
+    tailwind?: {
+      config?: any;
+    };
+  }
+}
+
+export function TailwindLoader() {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+
+    // Load Tailwind only after React hydration is complete
+    if (typeof window !== "undefined" && !window.tailwind) {
+      const tailwindScript = document.createElement("script");
+      tailwindScript.src = "https://cdn.tailwindcss.com";
+      tailwindScript.onload = () => {
+        // Configure Tailwind after it loads
+        if (window.tailwind) {
+          window.tailwind.config = {
+            darkMode: "class",
+            theme: {
+              extend: {},
+            },
+          };
+        }
+      };
+      document.head.appendChild(tailwindScript);
+    }
+  }, []);
+
+  // Don't render anything during SSR to avoid hydration mismatch
+  if (!mounted) {
+    return null;
+  }
+
+  return null;
+}