shadcn-errors-styling-conflicts

What problem does it solve?

Fixes situations where a shadcn component’s className override shows up in the DOM but does not produce the expected visual result due to Tailwind class conflicts, incorrect merge order, or Tailwind v3↔v4 semantic mixing.

Core Features & Use Cases

• Deterministic cn() + tailwind-merge rules: Ensures conditional class composition resolves Tailwind utility conflicts via the canonical cn() pattern (clsx + tailwind-merge), preventing duplicates like p-4/p-2 from leaking to the DOM.
• Correct cva class merge order: Diagnoses whether a consumer className is being overridden by cva output by validating the fixed composition order (base → variants → compoundVariants → defaultVariants → consumer className).
• Version-aware class conflict checks: Identifies Tailwind v3 vs v4 issues including important-namespace behavior (! prefix vs suffix), ring/size semantics, and class identity shifts that manifest as “unstyled” or “doubled-up” styling.

Quick Start

Diagnose a failed className override by checking whether the consumer className is last in cn(), then apply tailwind-merge-compatible fixes to eliminate Tailwind family conflicts and Tailwind v3/v4 semantic mismatches.