Skip to content

Rule · Lint

Class looks like a Tailwind utility but compiles to no CSS

lint/tw-unknown-classerrorvoid lintupdated

Why it matters

Tailwind v4 never errors on unknown classes: bg-primary without --color-primary, rounded-card without --radius-card, or ease-smooth without --ease-smooth silently render nothing. The component looks almost right, so the bug ships. void compiles your real CSS entry and checks every class string against it.

How to fix it

Define the missing theme variable in @theme (namespace decides the utility: --color-* → bg/text/border, --radius-* → rounded, --ease-* → ease, --font-* → font, --shadow-* → shadow) or switch to an existing token.

Example

css
@import "tailwindcss";
@theme {
  --color-primary: oklch(0.62 0.19 272);   /* enables bg-primary, text-primary … */
  --radius-card: 0.75rem;                   /* enables rounded-card */
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1); /* enables ease-smooth */
}

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.