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
+}