Tailwind CSS ・ tailwind-mergeについて

目的

Tailwind CSSについて基本的なところは理解できてきた。よりコードの質を高めるためにtailwind-mergeについて調べてみた。

tailwind-merge

about

TailwindのCSSクラスを、スタイルの衝突なしにJSに効率的にマージするユーティリティ関数です。

www.npmjs.com

やっていることは非常にシンプルで、デフォルトのスタイルに良い感じに追加のスタイルを上書きしてくれる。
簡単にカスタムの幅を増やしてくれる。

usage

上書きではなく、単なるスタイルの連結はtwJoinを使うと良い。

// React components with JSX syntax used in this example

import { twJoin } from 'tailwind-merge'

function MyComponent({ forceHover, disabled, isMuted }) {
    return (
        <div
            className={twJoin(
                TYPOGRAPHY_STYLES_LABEL_SMALL,
                'grid w-max gap-2',
                forceHover ? 'bg-gray-200' : ['bg-white', !disabled && 'hover:bg-gray-200'],
                isMuted && 'text-gray-600',
            )}
        >
            {/* More code… */}
        </div>
    )
}

スタイルを上書く場合はtwMergeを使用する。

// React components with JSX syntax used in this example

import { twMerge } from 'tailwind-merge'

function MyComponent({ forceHover, disabled, isMuted, className }) {
    return (
        <div
            className={twMerge(
                TYPOGRAPHY_STYLES_LABEL_SMALL,
                'grid w-max gap-2',
                forceHover ? 'bg-gray-200' : ['bg-white', !disabled && 'hover:bg-gray-200'],
                isMuted && 'text-gray-600',
                className,
            )}
        >
            {/* More code… */}
        </div>
    )
}

※注意点

tailwind-mergeはスタイルの変種を扱う主要なツールではない、とある。つまりvariantを持たせて管理したい場合は、Tailwind Variantsを使うなどする。
また、スタイルの自由度が増す分、管理がめちゃくちゃになる可能性があるため、使い方のルールを設けるのが良い。
再利用性の高いコンポーネントには使用しない。
github.com