From 7c80d90485d91619b801fd2e8e93072b8230902c Mon Sep 17 00:00:00 2001
From: kleap-admin <admin@kleap.co>
Date: Fri, 16 Jan 2026 10:54:30 +0000
Subject: [PATCH] Update components/tailwind-cdn-client.tsx

---
 components/tailwind-cdn-client.tsx | 111 +++++++++++++++++++++++++++++
 1 file changed, 111 insertions(+)
 create mode 100644 components/tailwind-cdn-client.tsx

diff --git a/components/tailwind-cdn-client.tsx b/components/tailwind-cdn-client.tsx
new file mode 100644
index 0000000..956df4d
--- /dev/null
+++ b/components/tailwind-cdn-client.tsx
@@ -0,0 +1,111 @@
+'use client';
+
+import { useEffect } from 'react';
+
+/**
+ * CRITICAL COMPONENT: Loads Tailwind v4 CDN on client-side only
+ * ⚠️ DO NOT REMOVE OR MODIFY WITHOUT CAREFUL TESTING ⚠️
+ *
+ * This component prevents hydration mismatches by loading Tailwind CDN
+ * only after React hydration is complete. It's essential for CodeSandbox
+ * environments where we use Tailwind v4 CDN instead of compiled CSS.
+ *
+ * Without this component, you'll get hydration errors because server
+ * and client would render different HTML/styles.
+ *
+ * NEVER load CDN styles in layout.tsx with conditional logic based on
+ * process.env as this causes hydration mismatches.
+ */
+export function TailwindCDNClient() {
+  useEffect(() => {
+    // Show content immediately on Vercel (CSS is already compiled)
+    if (process.env.NEXT_PUBLIC_VERCEL) {
+      document.body.classList.add('css-loaded');
+      return;
+    }
+
+    // Only load CDN if not on Vercel
+    if (!process.env.NEXT_PUBLIC_VERCEL) {
+      // Check if already loaded
+      const existingScript = document.querySelector('script[src*="@tailwindcss/browser"]');
+      const existingStyle = document.querySelector('style[type="text/tailwindcss"]');
+
+      if (!existingScript && !existingStyle) {
+        // Add Tailwind config
+        const style = document.createElement('style');
+        style.setAttribute('type', 'text/tailwindcss');
+        style.textContent = `
+          @theme {
+            --radius: 0.625rem;
+            --color-neutral-50: rgb(250 250 250);
+            --color-neutral-100: rgb(245 245 245);
+            --color-neutral-200: rgb(229 229 229);
+            --color-neutral-300: rgb(212 212 212);
+            --color-neutral-400: rgb(163 163 163);
+            --color-neutral-500: rgb(115 115 115);
+            --color-neutral-600: rgb(82 82 82);
+            --color-neutral-700: rgb(64 64 64);
+            --color-neutral-800: rgb(38 38 38);
+            --color-neutral-900: rgb(23 23 23);
+            --color-primary: #020022;
+            --color-muted: rgb(82 82 82);
+            --color-muted-dark: rgb(212 212 212);
+            --animate-scroll: scroll var(--animation-duration, 40s) var(--animation-direction, forwards) linear infinite;
+            --animate-marquee: marquee var(--marquee-duration) linear infinite;
+            --animate-fade-in: fade-in 0.5s linear forwards;
+          }
+
+          @keyframes scroll {
+            to { transform: translate(calc(-50% - 0.5rem)); }
+          }
+
+          @keyframes marquee {
+            100% { transform: translateY(-50%); }
+          }
+
+          @keyframes fade-in {
+            from { opacity: 0; }
+            to { opacity: 1; }
+          }
+
+          .shadow-derek {
+            box-shadow: 0px 0px 0px 1px rgb(0 0 0 / 0.06),
+              0px 1px 1px -0.5px rgb(0 0 0 / 0.06),
+              0px 3px 3px -1.5px rgb(0 0 0 / 0.06),
+              0px 6px 6px -3px rgb(0 0 0 / 0.06),
+              0px 12px 12px -6px rgb(0 0 0 / 0.06),
+              0px 24px 24px -12px rgb(0 0 0 / 0.06);
+          }
+
+          .shadow-aceternity {
+            box-shadow: 0px 2px 3px -1px rgba(0,0,0,0.1),
+              0px 1px 0px 0px rgba(25,28,33,0.02),
+              0px 0px 0px 1px rgba(25,28,33,0.08);
+          }
+
+          .bg-gradient-radial {
+            background-image: radial-gradient(var(--tw-gradient-stops));
+          }
+
+          .bg-gradient-conic {
+            background-image: conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops));
+          }
+        `;
+        document.head.appendChild(style);
+
+        // Add Tailwind script
+        const script = document.createElement('script');
+        script.src = 'https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4';
+        script.onload = () => {
+          // Show content when CDN is loaded and processed
+          setTimeout(() => {
+            document.body.classList.add('css-loaded');
+          }, 50); // Small delay for CDN to process styles
+        };
+        document.head.appendChild(script);
+      }
+    }
+  }, []);
+
+  return null;
+}
\ No newline at end of file