TailwindCSSでクラスを動的に付け替える方法
目次
TailwindCSSを使い始めて最初に戸惑った部分なのでまとめておきます
clsxとtailwind-mergeをインストール
pnpm install clsx tailwind-merge
clsxは動的なクラスの付け替えを可能にするライブラリで、tailwind-mergeはクラス名の結合をいい感じにやってくれるライブラリです。
動的なクラスの付け替えに必要になるのはclsxだけなんですが、tailwind-mergeは同じクラス名を複数回書いてしまった時に2つ目以降を消しておいてくれたり、クラス名同士がコンフリクトしないようにしてくれたりとなにかと優秀なライブラリなので、是非一緒に入れておくことをおすすめします
cn関数を作る
動的なクラスの付け替えとクラス名の結合を、同時にやってくれるめっちゃ便利な関数を作っておきます。
lib/utils.ts
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: (string | undefined)[]) {
return twMerge(clsx(inputs));
}
使用例
こういう感じで使います
import { cn } from '@/lib/utils';
export const ExampleLink = ({
href,
active,
className
}: {
href: string;
active: boolean;
className?: string;
}) => {
return (
<Link
href={href}
className={cn(
"text-foreground",
active ? "bg-red-400" : "bg-gray-400",
className
)}
>
{href}
</Link>
);
};
このコードの場合は、
text-foregroundは共通で適用されるスタイルactive=trueの時、bg-red-400が適用されるactive=falseの時、bg-gray-400が適用されるclassNameを追加した場合は、上記のCSSにいい感じに結合してくれる
という感じになります！以上です✨
