The conflict problem
When component defaults and caller-provided classes contain conflicting utilities, simply concatenating strings can leave both utilities in the final HTML. CSS order and specificity can make the result surprising.
Tailwind Merge
The tailwind-merge package can intelligently merge compatible Tailwind utility conflicts in JavaScript or TypeScript. It is especially useful in reusable component libraries.
Do not merge blindly
Merge utilities only where the library understands the conflict. Complex custom CSS relationships may still require explicit component APIs.
ADVERTISEMENT