fix: restore Marquee animation and Tailwind v4 compatibility

Author: Yeom-JinHo

apps/ui-layout/app/globals.css

@@ -2,6 +2,11 @@
 @import "./token.css";
 @import "./code-hike.css";
 
+@source './pages/**/*.{js,ts,jsx,tsx,mdx}';
+@source './components/**/*.{js,ts,jsx,tsx,mdx}';
+@source './app/**/*.{js,ts,jsx,tsx,mdx}';
+@source './content/**/*.{md,mdx}';
+@source './registry/**/*.{js,ts,jsx,tsx}';
 @source '../../../packages/ui/src/**/*.{js,ts,jsx,tsx}';
 @source '../../../packages/blocks/src/**/*.{js,ts,jsx,tsx}';
 
@@ -103,12 +108,6 @@
   --color-rainbow-2-end:   hsl(255 100% 50% / 0.51);
   --color-rainbow-2-via:   hsl(20  100% 55% / 0.56);
 
-  --animate-border: border 4s linear infinite;
-  --animate-infinite-scroll: infinite-scroll 25s linear infinite;
-  --animate-marquee: marquee var(--duration) linear infinite;
-  --animate-marquee-vertical: marquee-vertical var(--duration) linear infinite;
-  --animate-marquee-reverse: marquee-reverse var(--duration) linear infinite;
-  --animate-marquee-vertical-reverse: marquee-vertical-reverse var(--duration) linear infinite;
 
   @keyframes border {
     to {
@@ -123,6 +122,16 @@
       transform: translateX(-100%);
     }
   }
+}
+
+@theme inline {
+  --animate-border: border 4s linear infinite;
+  --animate-infinite-scroll: infinite-scroll 25s linear infinite;
+  --animate-marquee: marquee var(--duration) linear infinite;
+  --animate-marquee-vertical: marquee-vertical var(--duration) linear infinite;
+  --animate-marquee-reverse: marquee-reverse var(--duration) linear infinite;
+  --animate-marquee-vertical-reverse: marquee-vertical-reverse var(--duration) linear infinite;
+
   @keyframes marquee {
     from {
       transform: translateX(0);

apps/ui-layout/components/ui/marquee.tsx

@@ -23,7 +23,7 @@ export function Marquee({
     <div
       {...props}
       className={cn(
-        'group flex overflow-hidden p-2 [--duration:40s] [--gap:1rem] gap-[var(--gap)]',
+        'group flex overflow-hidden p-2 [--duration:40s] [--gap:1rem] gap-(--gap)',
         {
           'flex-row': !vertical,
           'flex-col': vertical,
@@ -36,7 +36,7 @@ export function Marquee({
         .map((_, i) => (
           <div
             key={i}
-            className={cn('flex shrink-0 justify-around gap-[var(--gap)]', {
+            className={cn('flex shrink-0 justify-around gap-(--gap)', {
               'animate-marquee flex-row': !vertical && !reverse,
               'animate-marquee-vertical flex-col': vertical && !reverse,
               'animate-marquee-reverse flex-row': !vertical && reverse,

apps/ui-layout/content/components/marquee.mdx

@@ -82,9 +82,13 @@ export const metadata = {
 ```css global.css
 @import "tailwindcss";
 
-@theme {
+@theme inline {
+  --animate-border: border 4s linear infinite;
+  --animate-infinite-scroll: infinite-scroll 25s linear infinite;
   --animate-marquee: marquee var(--duration) linear infinite;
   --animate-marquee-vertical: marquee-vertical var(--duration) linear infinite;
+  --animate-marquee-reverse: marquee-reverse var(--duration) linear infinite;
+  --animate-marquee-vertical-reverse: marquee-vertical-reverse var(--duration) linear infinite;
 
   @keyframes marquee {
     from {
@@ -102,6 +106,22 @@ export const metadata = {
       transform: translateY(calc(-100% - var(--gap)));
     }
   }
+  @keyframes marquee-reverse {
+    from {
+      transform: translateX(calc(-100% - var(--gap)));
+    }
+    to {
+      transform: translateX(0);
+    }
+  }
+  @keyframes marquee-vertical-reverse {
+    from {
+      transform: translateY(calc(-100% - var(--gap)));
+    }
+    to {
+      transform: translateY(0);
+    }
+  }
 }
 ```
 
@@ -131,7 +151,7 @@ export default function Marquee({
     <div
       {...props}
       className={cn(
-        'group flex overflow-hidden p-2 [--duration:40s] [--gap:1rem] gap-[var(--gap)]',
+        'group flex overflow-hidden p-2 [--duration:40s] [--gap:1rem] gap-(--gap)',
         {
           'flex-row': !vertical,
           'flex-col': vertical,
@@ -144,7 +164,7 @@ export default function Marquee({
         .map((_, i) => (
           <div
             key={i}
-            className={cn('flex shrink-0 justify-around gap-[var(--gap)]', {
+            className={cn('flex shrink-0 justify-around gap-(--gap)', {
               'animate-marquee flex-row': !vertical && !reverse,
               'animate-marquee-vertical flex-col': vertical && !reverse,
               'animate-marquee-reverse flex-row': !vertical && reverse,
@@ -156,7 +176,7 @@ export default function Marquee({
           </div>
         ))}
     </div>
-  );
+  )
 }
 ```