shadcn-errors-styling-conflicts

A shadcn className override appears in the DOM but fails to render due to Tailwind utility conflicts and incorrect merge order in your cn() function. Applying tailwind-merge last-wins semantics resolves these visual conflicts by eliminating duplicate utility families.

Fix cva className merge order by validating the fixed composition sequence: base, variants, compoundVariants, defaultVariants, then consumer className. Placing the consumer className last in the cn() function ensures it overrides cva output correctly.

Migrate Tailwind v3 to v4 by checking for important-namespace behavior shifts, ring and size semantics, and class identity changes. Identifying these version-aware semantic mismatches prevents components from appearing unstyled or doubled-up during migration.

tailwind-merge resolves conflicts between Tailwind utilities, but you must distinguish between arbitrary VALUE and arbitrary PROPERTY bracket syntax. Correcting specific anti-patterns in your cn() composition ensures deterministic merge results for these bracket syntaxes.

The correct cn() pattern combines clsx for conditional class composition with tailwind-merge to enforce last-wins semantics. This canonical approach prevents duplicate Tailwind utilities like p-4 and p-2 from leaking into the DOM simultaneously.

Avoid using the important modifier for Tailwind class conflicts when porting v3 code to v4, as the important-namespace behavior shifts from a prefix to a suffix. Relying on tailwind-merge last-wins semantics instead of !important produces more maintainable component styling.