Skip to content

Allow custom tw-Merge config #7

@jonaphil

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)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions