Tailwind Variantsの`VariantProps`でvariantsを型として利用する

プロジェクトでTailwind Variantsを利用していると定義したvariantsを型として利用できるので便利です！

どうやって使うのか？

公式のドキュメントを読めばすぐにわかることですが、importでVariantPropsを呼び出すことで利用できます！

import { tv, type VariantProps } from 'tailwind-variants'

どんな場面で使えるのか？

例えばborderのスタイルをTailwind Variantsを利用して下記のように書いたとします。

const borderStyle = tv({
  base: 'border border-black',
  variants: {
    type: {
      solid: 'border-solid',
      dotted: 'border-dotted',
      dashed: 'border-dashed',
    }
  }
})

この時VariantPropsを利用しない場合だとコンポーネントの方は下記のようになります。

import { FC, PropsWithChildren } from 'react'
import { tv } from 'tailwind-variants'

const borderStyle = tv({
  base: 'border border-black',
  variants: {
    type: {
      solid: 'border-solid',
      dotted: 'border-dotted',
      dashed: 'border-dashed',
    }
  }
})

type Props = {
  type: 'solid' | 'dotted' | 'dashed'
}

const Component:FC<PropsWithChildren<Props>> = ({ type, children }) => <div className={borderStyle({type})}>{children}</div>

コンポーネントに渡されるpropsの型をtypeで宣言してやる必要があります。
ただ、VariantPropsを利用するとスマートに記述できます。

import { FC, PropsWithChildren } from 'react'
- import { tv } from 'tailwind-variants'
+ import { tv, type VariantProps } from 'tailwind-variants';

const border = tv({
  base: 'border border-black',
  variants: {
    type: {
      solid: 'border-solid',
      dotted: 'border-dotted',
      dashed: 'border-dashed',
    }
  }
})

- type Props = {
-   type: 'solid' | 'dotted' | 'dashed'
- }
+ type Props = VariantProps<typeof border>;

const Component:FC<PropsWithChildren<Props>> = ({ type, children }) => <div className={border({type})}>{children}</div>

という感じでvariantsを型として利用できます！
Propsの値は下記のようになります！

type Props = {
  type?: "solid" | "dotted" | "dashed" | undefined;
}

公式のドキュメントにも記載がありますが、VariantPropsを利用した型定義は全て任意プロパティとなりundefinedが許容されます…。
必須プロパティとして扱いたい場合はRequiredを利用しましょう！

type Props = Required<VariantProps<typeof border>>;

// Propsの中
type Props = {
  type: "solid" | "dotted" | "dashed";
}

variantsが複数定義された場合は下記のようになります。

const border = tv({
  base: 'border',
  variants: {
    type: {
      solid: 'border-solid',
      dotted: 'border-dotted',
      dashed: 'border-dashed',
    },
    color: {
      black: 'border-black',
      white: 'border-white',
    },
  }
})

type Props = VariantProps<typeof border>;

// Propsの中
type Props = {
  type?: "solid" | "dotted" | "dashed" | undefined;
  color?: "black" | "white" | undefined;
}

一部を利用したい！みたいな時はPickやOmitを利用してください！

type Props = Pick<VariantProps<typeof border>, 'type'>

// Propsの中
type Props = {
  type?: "solid" | "dotted" | "dashed" | undefined;
}

【まとめ】VariantPropsでvariantsを型として利用する

VariantPropsを利用することで定義をいくつもすることなくスッキリ書けます。
ただ、任意プロパティになってしまうことには注意が必要です。

Tailwind Variantsを利用している際は、variantsを利用した型定義を検討してみてください！
冗長的なコードをスッキリさせてコードの可読性を良くできるかもしれません！

ただ、Storybookを利用する場合には注意が必要です…。
別の記事にまとめたのでご一読ください。