Skip to content

Rule · Lint

animate-* class with no matching --animate-* theme variable or @keyframes

lint/animate-undefinederrorvoid lintupdated

Why it matters

Registry components (Aceternity spotlight, React Bits StarBorder, meteors) ship animate-spotlight-style classes whose keyframes lived in a v3 tailwind.config.js or a comment. On Tailwind v4 the class compiles to nothing; when the base state is opacity-0 the element is invisible forever, with no error.

How to fix it

Define the animation in your CSS entry: @theme { --animate-spotlight: spotlight 2s var(--ease-out) both; @keyframes spotlight { … } }, or delete the class. void compiles the real CSS and reports every animate-* candidate that emitted no rule.

Example

css
@theme {
  --animate-spotlight: spotlight 2s cubic-bezier(0.23, 1, 0.32, 1) 0.75s both;
  @keyframes spotlight {
    from { opacity: 0; transform: translate(-72%, -62%) scale(0.5); }
    to   { opacity: 1; transform: translate(-50%, -40%) scale(1); }
  }
}

References

More lint rules

void lint reports 67 rules in this category. Static source checks with no browser: Tailwind v4 silent failures, Next.js 16 API traps, React render-body bugs, accessibility markup, SEO files and motion hygiene.