46 lines
1.0 KiB
TypeScript
46 lines
1.0 KiB
TypeScript
"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;
|
|
}
|