fix: resolve tailwind JIT purge of dynamic hover classes in HoverShineOverlay

Former-commit-id: ba37dc30ed026b41069bcd9bb0ca149106fad455
This commit is contained in:
2026-05-08 11:14:39 +02:00
parent ec5c4ebbfb
commit ad2d9c21c7

View File

@@ -15,11 +15,18 @@ export function HoverShineOverlay({
shineColor = 'via-white/10',
hoverPrefix = 'group-hover:'
}: HoverShineOverlayProps) {
// Tailwind JIT cannot parse dynamic strings like `${prefix}left-[100%]`.
// We must provide literal strings for the compiler.
const hoverClass = hoverPrefix === 'peer-hover:'
? 'peer-hover:left-[100%]'
: 'group-hover:left-[100%]';
return (
<div
className={cn(
"absolute top-0 -left-[150%] h-[200%] w-[150%] bg-gradient-to-r from-transparent to-transparent skew-x-[-20deg] transition-all duration-1000 ease-[cubic-bezier(0.16,1,0.3,1)] z-30 pointer-events-none",
`${hoverPrefix}left-[100%]`,
hoverClass,
shineColor,
className
)}