diff --git a/components/tailwind-loader.tsx b/components/tailwind-loader.tsx new file mode 100644 index 0000000..b30c902 --- /dev/null +++ b/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 +} \ No newline at end of file