tailwind-merge-recipe

What problem does it solve?

Tailwind class merging can break when you use custom CSS variable tokens, leading to incorrect or conflicting utility classes.

Core Features & Use Cases

• Extends tailwind-merge behavior: Adds custom theme keys and validator functions so Tailwind utilities match your design tokens.
• Prevents class conflicts: Ensures tokens like custom colors, spacing, and typography merge correctly instead of producing unintended duplicates.
• Works with dynamic token naming: Uses regex-based validators to cover families of utilities rather than only fixed allowlists.

Quick Start

Paste the provided extendTailwindMerge configuration into your project, then import and use cn(...) when composing Tailwind class strings that include your custom CSS variable-based utilities.