classNameの定義はtailwind-variantsとtailwind-mergeで宣言的にスッキリ書ける

classNameの定義方法でこれが良さそう！というものを学びましたので参考にしていただけると幸いです！

これまでの書き方

import { twMerge } from 'tailwind-merge'

const baseClass = 'p-4';
const spacingClasses = spacing !== undefined && {
  ['ml-4 mr-4']: vertical,
  ['mt-4']: !vertical,
}

const hoge = ({ vertical }) => {
    return (
      <div className={twMerge(baseClass, spacingClasses)}>
        <p>hoge</p>
      </div>
    )
}

この書き方は論理演算子のロジックを読んだ上でどのようなスタイルが当たるのかを把握しないといけなくなってしまうコードとなります。

tailwind-variantsを使って書いてみる

- import { twMerge } from 'tailwind-merge'
+ import { tv } from 'tailwind-variant'

- const baseClass = 'p-4';
- const spacingClasses = spacing !== undefined && {
-   ['ml-4 mr-4']: vertical,
-   ['mt-4']: !vertical,
- }

+ const customClass = tv({
+  base: 'p-4',
+  variants: {
+    vertical: {
+      true: 'ml-4 mr-4',
+      false: 'mt-4',
+    }
+  }
+ })

const hoge = ({ vertical }) => {
    return (
-     <div className={twMerge(baseClass, spacingClasses)}>
+     <div className={customClass({vertical})}>
        <p>hoge</p>
      </div>
    )
}

tv({})の中に共通で持たせたいclassをbaseとして定義して、動的に付与したいclassをvariantsの中に定義します！

verticalという値がbooleanの場合の記述、オブジェクトの中をtrueとfalseと定義しておきます!

classNameの定義箇所でcustomClass({vertical})で呼び出して、propsを渡してあげたらあとは状態に応じてclassがレンダリングされます！

また、propsでclassNameを受け渡すようにしたい場合したい場合はtailwind-mergeを併用します！

+ import { twMerge } from 'tailwind-merge'
import { tv } from 'tailwind-variant'

const customClass = tv({
  base: 'p-4',
  variants: {
    vertical: {
      true: 'ml-4 mr-4',
      false: 'mt-4',
    }
  }
})

const hoge = ({ vertical, classNameProps }) => {
    return (
+      <div className={twMerge(customClass({vertical}), classNameProps)}>
        <p>hoge</p>
      </div>
    )
}

【classNameの定義はtailwind-variantsとtailwind-mergeで宣言的にスッキリ書ける】まとめ

classの定義方法はさまざまな書き方があります。
tailwind-variantsも使い方によっては冗長的な記述になってしまうケースもあるのかもしれません。

ただ、classの付与条件が多岐にわたる場合にはコードの見通しを良くするのに有効な手段だと考えますので検討してみてください！