TailwindCSS PR

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

記事内に商品プロモーションを含む場合があります

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

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

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

バージョン

Tailwind CSS v3.2以降

使用したい状況

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

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

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」とすることで実装ができます。

<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>

groupがついたクラス反応してその子要素のスタイリングができるみたいですね!

ちなみに、今回は子要素に「group-last」と書いて、「groupクラスがついている要素の兄弟要素で最後の要素の場合(つまりlast-childの場合)」としていますが、「group-※」とすればほとんどの疑似クラスと組み合わせができるようです!

下記記事を参考にさせていただきました👇(こちらの記事の参考コードでは「group-hover」としていました)

Tailwind CSS の一歩進んだ書き方