【React】Tailwind CSSで動的なスタイリングを設定できない！

スタイル
2023.11.20
スポンサーリンク

導入

Tailwind CSSはその柔軟性と効率性で人気を博していますが、動的なスタイルの適用には少し工夫が必要です。

特に、Reactと組み合わせて使用する場合、静的なクラス名の解析が挑戦となります。

今回は、Reactのコンポーネントに対して、Tailwind CSSを用いて動的にスタイルを適用する方法について具体例を交えて解説します。

問題の概要

Tailwind CSSはビルド時に使用されるクラスを静的に解析し、未使用のスタイルを削除します。

これは通常、パフォーマンスを向上させるために有効ですが、動的にクラス名を生成したい場合に問題となります。

たとえば、ユーザーの操作に応じて背景色を変更するボタンコンポーネントを作成する場合を考えてみましょう。

具体例

const DynamicButton: React.FC<{isActive: boolean}> = ({ isActive }) => {
  const bgColorClass = isActive ? 'bg-green-500' : 'bg-red-500';

  return <button className={`p-2 text-white ${bgColorClass}`}>Click Me</button>;
};

このコードでは、isActive プロパティに基づいて、ボタンの背景色を動的に変更しています。

しかし、この方法ではTailwind CSSのビルドプロセスでスタイルが削除される可能性があります。

解決策

この問題を解決するためには、以下のようなアプローチを取ります。

関数を使用してスタイルを管理：

getColorClass という関数を作成し、カラーの名前に基づいて適切な Tailwind CSS のクラス名を返します。

const getColorClass = (isActive: boolean) => {
  return isActive ? 'bg-green-500' : 'bg-red-500';
};

コンポーネントの改善：

DynamicButton コンポーネントをこの関数を用いて改善します。

const DynamicButton: React.FC<{isActive: boolean}> = ({ isActive }) => {
  return <button className={`p-2 text-white ${getColorClass(isActive)}`}>Click Me</button>;
};

なぜこの方法が効果的なのか

この方法では、クラス名の生成が単一の関数内で行われるため、Tailwind CSSのビルドプロセス中にクラスが削除されることはありません。

また、このアプローチにより、スタイルのロジックをコンポーネントから分離し、再利用性を高めることができます。

別の解決方法

Tailwind CSSで動的なスタイリングを実現する別の解決方法を提案します。前述の方法は関数を使ってクラス名を決定するものでしたが、他にもいくつかの方法があります。

CSSカスタムプロパティ（変数）の使用

Tailwind CSSでは、CSSカスタムプロパティ（変数）を使用して動的なスタイリングを行うことができます。

この方法では、Reactコンポーネントのスタイル属性で直接変数を操作します。

const DynamicButton: React.FC<{isActive: boolean}> = ({ isActive }) => {
  const bgColor = isActive ? '#10B981' : '#EF4444'; // Tailwindのgreen-500とred-500

  return <button style={{ backgroundColor: bgColor }} className="p-2 text-white">
    Click Me
  </button>;
};

CSS-in-JSライブラリの利用

CSS-in-JSライブラリ（例：styled-components、emotionなど）を使用して、スタイルを動的に適用する方法もあります。

このアプローチでは、コンポーネントのスタイルをJavaScriptで直接定義できます。

import styled from 'styled-components';

const StyledButton = styled.button`
  padding: 0.5rem;
  color: white;
  background-color: ${({ isActive }) => isActive ? '#10B981' : '#EF4444'};
`;

const DynamicButton: React.FC<{isActive: boolean}> = ({ isActive }) => {
  return <StyledButton isActive={isActive}>Click Me</StyledButton>;
};

クラス名のマッピング

事前にクラス名のマッピングを定義して、そのマッピングを使用してクラス名を決定する方法もあります。

const colorClasses = {
  active: 'bg-green-500',
  inactive: 'bg-red-500'
};

const DynamicButton: React.FC<{isActive: boolean}> = ({ isActive }) => {
  const className = isActive ? colorClasses.active : colorClasses.inactive;

  return <button className={`p-2 text-white ${className}`}>Click Me</button>;
};

まとめ

Tailwind CSSを使用した動的なスタイリングは、特にReactと組み合わせる場合には少し注意が必要です。

上記のような方法で、この問題を効果的に解決し、柔軟かつ効率的なコンポーネント設計を実現できます。

スポンサーリンク