Add ability to pass twMerge config for 'cn' helper function

[Copilot]

Summary

This PR adds the ability to customize the cn helper function with tailwind-merge configuration, allowing users to extend or override the default behavior for custom design systems and utility classes.

Motivation

When building design systems with custom Tailwind utility classes, the default cn helper doesn't know how to properly merge custom class groups. This leads to both classes being kept instead of the later one overriding the earlier one. By exposing tailwind-merge's configuration options, users can now define their own class groups and conflict resolution rules.

Changes

New createCn Function

Added a new createCn function that accepts a tailwind-merge configuration object and returns a customized cn function:

import { createCn } from 'reablocks';

// Create a custom cn with extended class groups for your design system
const customCn = createCn({
  extend: {
    classGroups: {
      'brand-color': [
        { 'bg-brand': ['primary', 'secondary', 'accent'] },
        { 'text-brand': ['primary', 'secondary', 'accent'] }
      ]
    }
  }
});

// Now custom classes merge correctly
customCn('bg-brand-primary', 'bg-brand-accent'); // 'bg-brand-accent'

Supported Configuration Options

Users can now configure:

• Custom class groups: Define which classes should conflict with each other
• Prefix: Set a custom prefix for Tailwind classes
• Separator: Use custom separators (e.g., _ instead of :)
• Cache size: Configure performance optimizations
• Theme overrides: Extend or replace default theme values

See tailwind-merge documentation for all available options.

Backward Compatibility

The existing cn function remains unchanged and continues to work exactly as before. This is a purely additive change with no breaking changes.

Testing

• ✅ Added 12 comprehensive test cases covering various configuration scenarios
• ✅ All existing tests continue to pass
• ✅ Added Storybook examples demonstrating real-world usage
• ✅ Full TypeScript type safety maintained

Documentation

• Added comprehensive JSDoc documentation with examples
• Created docs/cn-helper.mdx with detailed usage guide
• Added interactive Storybook stories showcasing different use cases

Example Use Cases

Design System with Custom Colors:

const designSystemCn = createCn({
  extend: {
    classGroups: {
      'font-size': [{ text: ['display-sm', 'display-md', 'display-lg'] }],
      'brand-color': [
        { 'bg-brand': ['primary', 'secondary', 'accent'] },
        { 'text-brand': ['primary', 'secondary', 'accent'] }
      ]
    }
  }
});

Custom Prefix:

const prefixedCn = createCn({ prefix: 'tw-' });
prefixedCn('tw-p-4', 'tw-p-2'); // 'tw-p-2'

Closes the issue requesting this functionality.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Add ability to pass twMerge config for 'cn' helper function</issue_title>
<issue_description></issue_description>

<agent_instructions>Add ability to pass twMerge config for 'cn' helper function. To let twMerge about custom overrides. More details here in twMerge documentation</agent_instructions>

Comments on the Issue (you are @copilot in this section)

@amcdnl @evgenoid - What was the goal of this? @evgenoid > [@evgenoid](https://github.com/evgenoid) - What was the goal of this?

To let twMerge about custom overrides. More details here in twMerge documentation</comment_new>

Fixes #303

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[netlify]

✅ Deploy Preview for reablocks-storybook ready!

Name	Link
🔨 Latest commit	0b9332f
🔍 Latest deploy log	https://app.netlify.com/projects/reablocks-storybook/deploys/68ee394f7c44ff000897c453
😎 Deploy Preview	https://deploy-preview-313--reablocks-storybook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.