106 lines
3.7 KiB
TypeScript
106 lines
3.7 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect } from 'react'
|
|
|
|
/**
|
|
* Tailwind CSS v4 CDN Loader
|
|
*
|
|
* CODESANDBOX: Uses CDN (lightningcss binary doesn't work in browser)
|
|
* VERCEL: This file is REPLACED by empty-loader.tsx via webpack (no CDN!)
|
|
*
|
|
* IMPORTANT: If this code executes, it means we're in preview/development
|
|
* (CodeSandbox, E2B, localhost). On Vercel production, webpack replaces
|
|
* this entire file with an empty component, so this code never runs.
|
|
*/
|
|
export function TailwindCDNLoader() {
|
|
useEffect(() => {
|
|
// If this code runs, we're in preview/development - ALWAYS load CDN
|
|
// On Vercel, webpack replaces this file so this code never executes
|
|
if (typeof window !== 'undefined') {
|
|
console.log('🎨 [Tailwind] Loading CDN for preview/development');
|
|
|
|
// CRITICAL: Load Tailwind config BEFORE the CDN script
|
|
const tailwindStyle = document.createElement('style');
|
|
tailwindStyle.type = 'text/tailwindcss';
|
|
tailwindStyle.textContent = `
|
|
@variant dark (&:where(.dark, .dark *));
|
|
|
|
@theme {
|
|
/* Base radius */
|
|
--radius: 0.625rem;
|
|
|
|
/* Neutral colors */
|
|
--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);
|
|
|
|
/* Custom colors from config */
|
|
--color-primary: #020022;
|
|
--color-muted: rgb(82 82 82);
|
|
--color-muted-dark: rgb(212 212 212);
|
|
|
|
/* Custom animations */
|
|
--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 from config */
|
|
@keyframes scroll {
|
|
to { transform: translate(calc(-50% - 0.5rem)); }
|
|
}
|
|
|
|
@keyframes marquee {
|
|
100% { transform: translateY(-50%); }
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
/* Custom utilities - box-shadows */
|
|
.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);
|
|
}
|
|
|
|
/* Background images */
|
|
.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.insertBefore(tailwindStyle, document.head.firstChild);
|
|
|
|
// Load Tailwind v4 browser CDN (AFTER config)
|
|
const tailwindScript = document.createElement('script');
|
|
tailwindScript.src = 'https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4';
|
|
document.head.appendChild(tailwindScript);
|
|
}
|
|
}, []);
|
|
|
|
return null;
|
|
}
|