Ecme - The Ultimate Next & TypeScript Web Template

classNames

utility function combines multiple class names using the classnames library and merges Tailwind CSS class conflicts using the tailwind-merge utility

Example

import classNames from '@/utils/classNames';

const Example = ({ primary, disabled }) => {
    return (
        <button
            className={classNames(
                'p-2 text-base',
                primary && 'bg-blue-500 text-white',
                disabled && 'bg-gray-500 cursor-not-allowed'
            )}
            disabled={disabled}
        >
            Click me
        </button>
    );
}

Params

param	Description	Type	Default
name	A variable-length list of class names or conditions that resolve to class names.	`cn.ArgumentArray`	-

Return

return	Description	Type	Default
classNames	ClassNames	`string`	-

TABLE OF CONTENT

Example