mh-jsx / tw-classnames

A lightweight utility function that simplifies the process of merging Tailwind Classes

Tailwind Classnames

twc aka tw-classnames is a lightweight utility function that simplifies the process of merging Tailwind Classes while also supporting conditional classes within objects.

Installation

You can install twc via npm or yarn:

npm install tw-classnames
# OR
yarn add tw-classnames

Usage

Import twc into your JavaScript or TypeScript code:

const twc = require('tw-classnames');
// OR
import twc from 'tw-classnames';

Merging Duplicate Classnames

twc allows you to smartly merge duplicate Tailwind classes.

const mergedClasses = twc('bg-blue', 'text-white', 'p-4', 'bg-green');
console.log(mergedClasses);
// Output: 'text-white p-4 bg-green'

Conditional Classes

twc supports conditional classes within objects. This is especially useful when you want to apply different classes based on certain conditions.

const isActive = true;
const classes = twc('bg-blue-500', 'text-white', { 'font-bold': isActive });
console.log(classes);
// Output: 'bg-blue-500 text-white font-bold'

Dependency Libraries

twc internally uses two popular libraries:

• clsx for object merging.
• tailwind-merge to merge Tailwind classes intelligently.

License

twc is open-source and released under the MIT License.