How to use and get benefits from tailwind merge

Introduction:

Tailwind merge allows you to merge multiple Tailwind CSS classes and automatically resolves conflicts between classes by removing classes conflicting with a class defined later.

• Supports Tailwind v3.0 up to v3.3 (if you use Tailwind v2, use tailwind-merge v0.9.0)
• Works in all modern browsers and Node >=12
• Fully typed
• Check bundle size on Bundlephobia

Reason to use:

Tailwind-merge makes it simple to create components with multiple levels of composition. This is particularly useful for design systems and UI component libraries. If you anticipate that styles will be modified at various levels of a component hierarchy, tailwind-merge helps maintain a small API surface between components.

How to Apply It:

npm install tailwind-merge

import {twMerge} from 'tailwind-merge'

<button classname= twMerge('baseClasses','propsClasses')> Submit <button>

In this button example baseClasses are those that uses direct in the button and propsClasses are those that are defined later or coming through the props.

• Merging internal classes with className prop: The primary purpose of tailwind-merge is to merge a className prop with the default classes of a component.

// React components with JSX syntax used in this example

function MyComponent({className }) {
    return (
        <div
            className={twMerge(p-5 text-gray font-bold,className,)}
        >
            Hello
        </div>
    )
}

You don't have to worry about potentially expensive re-renders because tailwind-merge caches results, making a re-render with the same props and state relatively lightweight as far as the call to twMerge is concerned.

twMerge behavior

tailwind-merge is designed to be predictable and intuitive. It follows a set of rules to determine which class wins when there are conflicts. Here is a brief overview of the conflict resolution tailwind-merge can do.

Last conflicting class wins

twMerge('p-5 p-2 p-4') // → 'p-4'

Allows refinements

twMerge('p-3 px-5') // → 'p-3 px-5'
twMerge('inset-x-4 right-4') // → 'inset-x-4 right-4'

Resolves non-trivial conflicts

twMerge('inset-x-px -inset-1') // → '-inset-1'
twMerge('bottom-auto inset-y-6') // → 'inset-y-6'
twMerge('inline block') // → 'block'

Supports modifiers and stacked modifiers

twMerge('p-2 hover:p-4') // → 'p-2 hover:p-4'
twMerge('hover:p-2 hover:p-4') // → 'hover:p-4'
twMerge('hover:focus:p-2 focus:hover:p-4') // → 'focus:hover:p-4'

twJoin behavior:

Use twJoin instead of twMerge when you simply join the class strings together without handling conflicting classes.

twJoin('m-4 text-center p-2 p-4') // → 'm-4 text-center'
twJoin('flex justify-center inset-x-4 right-4') // → 'flex justify-center'
twJoin('p-2 hover:p-4') // → 'p-2 hover:p-4'

Joining classes rather than merging forces you to write your code in such a way that no merge conflicts arise, which appears to be more work at first. However twJoin is faster than other class joining libraries because it avoids conflict resolution. It simplifies grouping conflicting classes together and eliminates the need for checking conflicts in subsequent arguments. This makes it easier to understand and use.