目次
Tailwind Variantsとは？
TailwindCSSを使ったスタイリングの管理を効率化するためのライブラリです。
ボタンやカードなどのコンポーネントを簡単にカスタマイズしたり再利用できるようにすることが目的です。
インポート
npm install tailwind-variants基本形
baseが基本形となるベースとなっています。
別コンポーネントで呼び出す際はvariantsの中で記述したcolorのキーを指定するとそのクラスが追加されます。
import React from "react";
import { VariantProps, tv } from "tailwind-variants";
const buttonStyle = tv(
{
base: "font-medium bg-blue-500 text-white rounded-full active:opacity-80",
variants: {
color: {
primary: "bg-blue-500 text-white hover:bg-blue-700",
secondary: "bg-purple-500 text-white hover:bg-purple-700",
success: "bg-green-500 hover:bg-green-700",
},
},
},
);
type ButtonVariants = VariantProps<typeof buttonStyle>;
interface ButtonProps extends ButtonVariants {
children: React.ReactNode;
}
const Button = ({ color, children }: ButtonProps) => {
return (
<button className={buttonStyle({ color})}>
{children}
</button>
);
};
export default Button;<Button color="secondary">ボタン</Button>複数のバリエーション
colorとは別にsize作成。その中でsm, md, lgと3つのサイズを指定して、Buttonコンポーネントを呼び出す際にcolorと同様にsizeも指定すると両方のクラスが合わさったものがスタイルとしてあたります。
const buttonStyle = tv(
{
base: "font-medium bg-blue-500 text-white rounded-full active:opacity-80",
variants: {
color: {
primary: "bg-blue-500 text-white hover:bg-blue-700",
secondary: "bg-purple-500 text-white hover:bg-purple-700",
success: "bg-green-500 hover:bg-green-700",
},
size: {
sm: "text-sm",
md: "text-base",
lg: "px-4 py-3 text-lg",
},
},
},
);<Button color='secondary' size='sm'>secondary</Button>ブール値の指定
disabledの中でtrue・falseの真偽値を指定することで、活性状態を定義することができる。
variants: {
color: {
primary: "bg-blue-500 text-white hover:bg-blue-700",
secondary: "bg-purple-500 text-white hover:bg-purple-700",
success: "bg-green-500 hover:bg-green-700",
},
size: {
sm: "text-sm",
md: "text-base",
lg: "px-4 py-3 text-lg",
},
disabled: {
true: "opacity-50 bg-gray-500 pointer-events-none",
},
},<Button color="secondary" size="sm" disabled={true}>ボタン</Button>複数のプロパティが条件を満たすとき
compoundVariantsは複数のvariantプロパティが特定の条件を満たす場合に追加されるクラスを指定できます。
この時、variantsプロパティにもcolorとdisabledは記述されているが、compoundVariantsにも同様のプロパティがあれば元のvariantsを上書きして表示される。
また、compoundVariantsは配列になっているので記述に注意
variants: {
color: {
primary: "bg-blue-500 text-white hover:bg-blue-700",
secondary: "bg-purple-500 text-white hover:bg-purple-700",
success: "bg-green-500 hover:bg-green-700",
},
size: {
sm: "text-sm",
md: "text-base",
lg: "px-4 py-3 text-lg",
},
disabled: {
true: "opacity-50 bg-gray-500 pointer-events-none",
},
},
compoundVariants: [
{
color: "success",
disabled: true,
class: "bg-green-100 text-green-700 dark:text-green-800",
},
],<Button color="success" disabled={true}>ボタン</Button>デフォルト値
指定のプロパティをデフォルト値として設定することも可能。
下記であればsizeがmd、colorがprimaryの状態をデフォルト値として設定してます。
variants: {
color: {
primary: "bg-blue-500 text-white hover:bg-blue-700",
secondary: "bg-purple-500 text-white hover:bg-purple-700",
success: "bg-green-500 hover:bg-green-700",
},
size: {
sm: "text-sm",
md: "text-base",
lg: "px-4 py-3 text-lg",
},
disabled: {
true: "opacity-50 bg-gray-500 pointer-events-none",
},
},
compoundVariants: [
{
size: ["sm", "md"],
class: "px-3 py-1",
},
{
color: "success",
disabled: true,
class: "bg-green-100 text-green-700 dark:text-green-800",
},
{
color: ["primary", "secondary"],
disabled: true,
class: "text-slate-400 bg-slate-200 dark:bg-slate-800 opacity-100",
},
],
defaultVariants: {
size: "md",
color: "primary",
},レスポンシブバリアント
Tailwind CSSの定義済みのブレークポイントを使用してレスポンシブバリアントの状態を定義できます。
{
base: 'font-semibold text-white py-1 px-3 rounded-full active:opacity-80',
variants: {
color: {
primary: 'bg-blue-500 hover:bg-blue-700',
secondary: 'bg-purple-500 hover:bg-purple-700',
success: 'bg-green-500 hover:bg-green-700'
},
size: {
small: 'py-0 px-2 text-xs',
medium: 'py-1 px-2 text-sm',
large: 'py-1.5 px-3 text-md'
}
}
},
{
responsiveVariants: ["sm", "md", "lg"],
}<Button color={{initial: 'primary', sm: 'success', md:'secondary'}} size={{initial: 'sm', sm: 'md', md: 'lg'}}>success</Button>
コメント