[bug]: Marquee animation fails in production build with Tailwind CSS v3

[Super-Xiaolong]

Describe the bug

The Marquee component animations work in development but fail in production builds.

Issue:

• Development (yarn dev): ✅ Works
• Production (yarn build + yarn start): ❌ Doesn't work

Root Cause:
The CSS uses @theme inline syntax, which is a Tailwind CSS v4 feature. This doesn't work with Tailwind CSS v3.x during production builds. The keyframes inside @theme inline blocks are not processed correctly when the CSS is optimized/minified.

Current implementation in globals.css:
@theme inline {
@Keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(calc(-100% - var(--gap))); }
}
@Keyframes marquee-vertical {
from { transform: translateY(0); }
to { transform: translateY(calc(-100% - var(--gap))); }
}
}

Fix:
Moving the keyframes outside @theme inline to standard CSS syntax resolves the issue and ensures compatibility with both Tailwind v3 and v4.

Affected component/components

Marquee

How to reproduce

1. Install: npx shadcn@latest add @magicui/marquee
2. Use Tailwind CSS v3.x (e.g., v3.4.14)
3. Implement the component in your page
4. Run yarn dev → Works ✅
5. Run yarn build && yarn start → Doesn't work ❌

Codesandbox/StackBlitz link

No response

Logs

System Info

- Tailwind CSS: ^3.4.14
- Next.js: 14.2.28
- Node: v20+
- Package Manager: yarn 1.22.22
- Browser: Chrome, Safari, Firefox (all affected)

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues