tailwind-variantsで特定の条件の時にスタイルを変えたい場合の書き方

少し前からTailwindCSSを利用した開発を行なっています。
その中で条件に応じてスタイルを変えたい場合の記述方法についてです！

tailwind-variantsの使い方

プロジェクトにインストールします。

yarn add tailwind-variants

インストールできたらコンポーネントで呼び出します。

import { tv } from 'tailwind-variants'

基本的な書き方は別の記事で紹介しているので割愛します！

tailwind-variantsで条件つきのスタイル定義

次のコードの例ではnestedがtrueの時にlistItemのテキストカラーとmarginを変更したいと思います。

const list = tv({
  base: 'ml-7',
  variants: {
    nested: {
      true: 'text-red-700',
    },
  },
  compoundVariants: [
    {
      nested: true,
      class: 'ml-5',
    },
  ],
});

nestedがfalseだと下記の状態になります。

nestedをtrueの状態にすると文字が赤くなり、marginのプロパティとしてml-5が設定されます。

まとめ

今回は単一条件によるスタイルの変更でしたが、2つ以上の条件でも設定することが可能です。

複雑すぎる定義するとコードの見通しが悪くなる可能性は高いです…

　ただ、tailwind-variantsを利用することでシンプルに記述することもできるので導入の検討してみてください！