Why it matters
In v4 square brackets are literal arbitrary values, so duration-[--duration-fast] emits transition-duration: --duration-fast — invalid CSS that the browser drops. The transition, color or size silently falls back to the default.
How to fix it
Replace [--name] with (--name) (parentheses are v4's CSS-variable shorthand), or write [var(--name)].
Example
// before (v3)
<div className="duration-[--duration-fast] bg-[--brand]" />
// after (v4)
<div className="duration-(--duration-fast) bg-(--brand)" />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.
tw-unknown-classClass looks like a Tailwind utility but compiles to no CSStw-js-config-ignored`tailwind.config.*` exists but the CSS entry has no `@config`tw-dark-variant-os`dark:` follows the OS, but the app toggles themes with a class/attributetw-v3-renamedUtility whose meaning changed between Tailwind v3 and v4tw-important-soupMany `!important` utilities in one filetw-arbitrary-sprawlMany arbitrary colors / pixel values bypass the design tokenspage-level-use-client`"use client"` at the top of a page or layoutheavy-importHeavy dependency imported into client code