Skip to content

Allow custom tw-Merge config #7

Description

@jonaphil

In https://github.com/networkteam/zebra-utils/blob/main/src/utils/classnames.ts twMerge is used in cn(). It would be nice to be able to adjust the config used by twMerge.

Usually this happens with extendTailwindMerge: https://github.com/dcastil/tailwind-merge/blob/v3.4.0/docs/configuration.md#extending-the-tailwind-merge-config .

Since twMerge is used directly in cn() I do not see a proper way besides using something like a factory-function.

zebra-utils:

// src/utils/classNames.ts
import { type ClassValue, clsx } from 'clsx';
import { twMerge, extendTailwindMerge } from 'tailwind-merge';

export const cnFactory =(twExtensionConfig: tailwindMergeExtensionsConfig) => 
  const twMerge = extendTailwindMerge(twExtensionConfig)
  return (...inputs: ClassValue[]) => {
    return twMerge(clsx(inputs));
  };

usage in project:

import {cnFactory}
const twConfigExtension = {...}
export const cn = cnFactory(twConfigExtension)

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions