Why it matters
Stacking ! modifiers means the cascade is being fought rather than designed. It breaks variants (hover/dark can no longer override), makes components unthemeable and usually hides a conflicting global style.
How to fix it
Find the conflicting rule (often an unlayered global CSS rule beating @layer utilities) and fix it at the source; use tailwind-merge/cn() to resolve class conflicts instead of !.
Example
/* move global resets into a layer so utilities win without ! */
@layer base {
button { padding: 0; }
}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-v3-arbitrary-var`utility-[--var]` is Tailwind v3 syntax; v4 needs `utility-(--var)`tw-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-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 codeimg-rawRaw `<img>` in a Next.js app