【tailwind-merge】特定の条件で Tailwind CSS を上書きする

はじめに

Tailwind CSS を三項演算子で適用していたところ、レビューで tailwind-merge を使うとスマートに Tailwind CSS の上書きができると指摘を受けました。
備忘録として、tailwind-merge の用途と使い方を簡単にまとめておきたいと思います。

用途と使い方

tailwind-merge は、Tailwind CSS で一部のスタイルを条件に応じて一回限りで変更したい場合に便利です。

たとえば、特定の条件下でスタイルを変更する場合、以下のように三項演算子を使用してクラスを切り替えることができます。

<div className={`items-center justify-end ${isHidden ? 'hidden' : 'flex'}`}>

この方法でも動作しますが、tailwind-merge を使用すると、三項演算子を使わずにスタイルをよりシンプルに上書きできます。
以下のように twMerge 関数を用いることで、クラスの競合を自動的に解決し、すっきりとしたコードになります。

import { twMerge } from 'tailwind-merge'

<div
    className={twMerge(
        "items-center justify-end flex",
        isHidden && 'hidden'
    )}
>

tailwind-merge はこのように、クラスの競合を整理し、読みやすく簡潔なコードを実現する際に非常に役立ちます。

おわりに

Tailwind CSS を使用したスタイルの管理では、複雑なクラスの競合が発生しがちですが、tailwind-merge を使うことで、シンプルかつ直感的に解決できます。特に一時的なスタイル変更や条件付きのクラス管理にはとても有効なツールです。今後もプロジェクトで活用し、よりスマートなコードを書くことを目指していきたいと思います。

この記事が tailwind-merge の活用方法の参考になれば幸いです。