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

//classNameの文字列を配列として読み込んで、スペースをつけて返す関数
const classNames = (...classes: string[]) => {
  return classes.filter(Boolean).join(" ");
}

この関数はtailwind cssの開発が作っているtailwind uiの例の中に入っていたものなのですが、これを入れるだけで、文字列連結を気にせずに、tailwind cssのクラスを書くことができます。

tailwind cssの短所

Next.jsというかReactでtailwind cssを使うとき、classNameの操作をすると、文字列連結がめんどくさい…、という状況になります。

複数クラスと変数をclassName内で同時に使おうとすると以下のような感じになります。

<div className={'string' + ' ' + `${style.news}`}>
//間にスペースを入れつつ、文字列を連結する

で、tailwindcssでクラスを設定する場合はこんな感じになります。

<div className="top-16 bottom-0 right-0 left-0 fixed py-6 px-6 lg:rounded-2xl lg:sticky lg:top-44 overflow-y-auto">

これはtailwindcssの短所でもあるのですが、1つのタグでレスポンシブなども設定すると、横の長さがすごいことになります。

useStateで状態を保存し、三項演算子でcssのクラスを切り替えるなんてことをする時に、文字列連結の書き方だと非常にめんどくさい、かつ、非常に読みづらいのです。

なので、関数を1つ間に入れて、classNameにtailwind cssのクラスを列挙するのと変わらない形で記述するようにする方法です。

例

//...必要部分を抜粋

//classNameの文字列を配列として読み込んで、スペースをつけて返す関数
const classNames = (...classes: string[]) => {
  return classes.filter(Boolean).join(" ");
}

//...必要部分を抜粋

const [isVisible, setIsVisible] = useState(true);

//...必要部分を抜粋
<span
  className={classNames(
    isVisible 
      ? "invisible opacity-0" 
      : "visible opacity-100",
        "lg:ml-24 xl:ml-32 lg:mt-14 lg:opacity-100 lg:visible duration-500"
  )}
>

isVisibleを条件として三項演算子でtailwind cssのクラスを切り替える例です。

className={}の中でclassNames関数を呼び出します。

classNames関数ではarray.filter(Boolean)で偽となる値を取り除いていますが、そうでない場合は文字列にスペースがくっついてくるという形になっています。

カンマ以降は共通部分として記述できます。