【Tailwind CSS】親要素がlast-childの場合のみ、その子要素にスタイリングする方法【groupの使い方】

こんにちは！Web制作のエンジニアをしています！モリヤス（@_moriyas）です。

最近Web制作・開発界隈で人気の（？）Tailwind CSSというCSSフレームワークを使用する機会があり、少し詰まった内容なので備忘録を残しておきます！

※最近Tailwind CSSを使い始めたばかりで、まだまだ十分に理解していない機能などありますので、説明に間違いがあったり、より良い方法があればそっと連絡いただけると嬉しいです！m(_ _)m

バージョン

Tailwind CSS v3.2以降

使用したい状況

タイトルにある通り「親要素がlast-childのときのみ、その子要素にスタイリングしたいとき」なのですが、それってどんなとき？

コードを見た方が早いかと思うので、下記に書いてみました。

Table.js

const humanData = [
  {
    name: "モリヤス",
    age: 29,
    jop: "Web Developer"
  },
  {
    name: "モリコ",
    age: 23,
    jop: "Teacher"
  },
  {
    name: "モリ次郎",
    age: 35,
    jop: "Musician"
  },
]

const Table = () => {

  return (
    <table className="table-fixed border-separate border-spacing-0">
      <thead>
        <tr>
          <th className="border-t border-l border-gray-500 px-4 py-2 bg-dark-gray">名前</th>
          <th className="border-t border-x border-gray-500 px-4 py-2 bg-dark-gray">年齢</th>
          <th className="border-t border-r border-gray-500 px-4 py-2 bg-dark-gray">職業</th>
        </tr>
      </thead>
      <tbody>
        {
          humanData.map((data, index) => (
            <tr key={index} className="group">
              <td className="group-last:border-b border-t border-l border-gray-500 px-4 py-3">{data.name}</td>
              <td className="group-last:border-b border-t border-x border-gray-500 px-4 py-3">{data.age}</td>
              <td className="group-last:border-b border-t border-x border-gray-500 px-4 py-3">{data.jop}</td>
            </tr>
          ))
        }
      </tbody>
    </table>
  );
}

export default Table;

配列に入ったデータをmapでぐるぐる回してテーブルのセルを表示させる
何か理由があり（今回はテーブル内の一部分を横スクロールさせたかった）、表のborderをthタグやtdタグで表示させる

上記のことをしないといけない場合、tbodyタグ内の最後の行を表すtrタグの子要素のtdタグにborder-bottomをつけたいですよね？

普通のHTMLで書かれているコードの場合、該当するタグに直接「border-b」（Tailwind cssの書き方）と書いてスタイリングすれば良いのですが、React（JavaScript）を使って動的に表示させているので少し工夫が必要かと思います。

そこで今回のメインの話になってきます。

親要素のtrタグのクラスに「group」をつけて、子要素のtdタグのクラスに「group-last:border-b」とすることで実装ができます。

JavaScript

<tr key={index} className="group">
  <td className="group-last:border-b border-t border-l border-gray-500 px-4 py-3">{data.name}</td>
  <td className="group-last:border-b border-t border-x border-gray-500 px-4 py-3">{data.age}</td>
  <td className="group-last:border-b border-t border-x border-gray-500 px-4 py-3">{data.jop}</td>
</tr>