Next.js
Tailwind CSS

Next.js（React）でTailwind cssの文字列連結を簡単にする

Tailwind CSSは、ユーティリティファーストのCSSフレームワークで、HTMLやJSX内でクラスを直接適用するスタイル指定が簡単にできます。しかし、Reactコンポーネント内でクラス名を動的に変更したい場合、複数のクラスを条件に応じて連結する必要が出てきます。この際に、文字列を手動で連結するのは面倒で、コードが読みにくくなることがあります。そこで、Tailwind CSSのクラス名を簡単に動的に組み合わせる方法を紹介します。

#1. 文字列連結の問題

まず、通常のReact（JSX）コードでは、条件に応じてクラス名を文字列として連結することがよくあります。例えば：

function Button({ isPrimary }) {
  return (
    <button className={`py-2 px-4 rounded ${isPrimary ? 'bg-blue-500' : 'bg-gray-500'}`}>
      Click me
    </button>
  );
}

このコードでは、isPrimaryがtrueの場合にbg-blue-500クラスを、falseの場合にbg-gray-500クラスを適用しています。このように動的にクラスを連結することはできますが、クラス名が多くなると可読性が低くなることがあります。

#2. **clsxやclassnames**を使って簡潔に

Reactでのクラス名の動的連結を簡単にするライブラリとして、clsxやclassnamesがあります。これらのライブラリを使うことで、条件付きのクラス名の付け方が簡潔になり、コードの可読性が向上します。

2.1 **clsx**の使用方法

clsxは非常に軽量で簡単に使えるライブラリです。以下のように、条件に応じてクラスを追加することができます。

まず、clsxをインストールします：

npm install clsx

次に、コンポーネント内でclsxを使って、動的にクラス名を連結します。


import clsx from 'clsx';

function Button({ isPrimary }) {
  return (
    <button className={clsx('py-2', 'px-4', 'rounded', { 'bg-blue-500': isPrimary, 'bg-gray-500': !isPrimary })}>
      Click me
    </button>
  );
}

clsxを使うと、条件が真のときにクラス名が追加され、偽のときはクラス名が除外されます。上記の例では、isPrimaryがtrueの場合にbg-blue-500が適用され、falseの場合はbg-gray-500が適用されます。

2.2 **classnames**の使用方法

classnamesも同様に動的なクラス名を管理できるライブラリです。インストールは次のように行います：

npm install classnames

classnamesを使った例は次の通りです：


import classNames from 'classnames';

function Button({ isPrimary }) {
  return (
    <button className={classNames('py-2', 'px-4', 'rounded', { 'bg-blue-500': isPrimary, 'bg-gray-500': !isPrimary })}>
      Click me
    </button>
  );
}

classnamesもclsxと非常に似た使い方をしますが、より多くのオプションが用意されています。例えば、classnamesでは複数のクラスを配列で渡したり、文字列とオブジェクトを混ぜて使うことができます。

#3. カスタムフックを使った再利用

動的にクラス名を変更するロジックを複数のコンポーネントで使いたい場合は、カスタムフックを作成すると便利です。これにより、複数の場所で同じロジックを使い回すことができます。


import { useMemo } from 'react';
import clsx from 'clsx';

function useButtonClasses(isPrimary) {
  return useMemo(() => {
    return clsx('py-2', 'px-4', 'rounded', {
      'bg-blue-500': isPrimary,
      'bg-gray-500': !isPrimary
    });
  }, [isPrimary]);
}

function Button({ isPrimary }) {
  const buttonClasses = useButtonClasses(isPrimary);

  return <button className={buttonClasses}>Click me</button>;
}

このように、useButtonClassesというカスタムフックを作成することで、Buttonコンポーネントがシンプルに保たれ、条件付きクラスのロジックを再利用しやすくなります。

#4. Tailwind CSSの**@apply**と組み合わせる

Tailwind CSSは@applyディレクティブを使って、複数のユーティリティクラスを1つにまとめることができます。これを使うことで、clsxやclassnamesと組み合わせて、より効率的にスタイルを管理できます。

例えば、以下のようにtailwind.cssファイルでスタイルをまとめておくと、コンポーネント内では簡単に呼び出せます：


/* tailwind.css */
.btn {
  @apply py-2 px-4 rounded;
}

.btn-primary {
  @apply bg-blue-500;
}

.btn-secondary {
  @apply bg-gray-500;
}

これをReactコンポーネントで使う際は、次のようにクラスを組み合わせます：

import clsx from 'clsx';
import './tailwind.css';

function Button({ isPrimary }) {
  return (
    <button className={clsx('btn', isPrimary ? 'btn-primary' : 'btn-secondary')}>
      Click me
    </button>
  );
}

この方法で、Tailwind CSSのユーティリティクラスを一度まとめておけば、コンポーネント内でのクラスの使い方がさらに簡潔になります。

#5. まとめ

Next.js（React）でTailwind CSSを使って文字列連結を簡単にする方法は、clsxやclassnamesといったライブラリを使うことで大幅に改善できます。これらを使用することで、条件付きでクラス名を簡単に連結でき、コードの可読性が向上します。また、カスタムフックや@applyを使ったスタイルの整理も便利です。これらの手法を活用することで、Reactアプリケーションでのスタイリングがより効率的で管理しやすくなります。

タグ一覧