Tailwind CSSで要素間の境界線をスタイリングするときはdivide-*が便利

こんにちは。エキサイトでデザイナーをしている齋藤です。

エキサイトホールディングス Advent Calendar 2024 シリーズ1の23日目を担当します。

今回は、TailwindCSSで要素間の境界線をスタイリングするときはdivide-*が便利というお話をします。

実現したいこと

今回実現したいUIは、以下のように行内セル間の垂直な境界線が破線になっているテーブルです。

HTML・CSS的に言い換えると、2つ目以降のtd要素の左側に破線の境界線を設けるということになります。

<table>
    ...
    <tbody>
        <tr>
            <!-- 2つ目以降の`td`要素の左側に破線の境界線を設ける -->
            <td></td>
            <td></td>
            <td></td>
        </tr>
        ...
    </tbody>
</table>

どうやってスタイリングするか

Tailwind CSSでスタイリングする場合、行内2つ目以降のtdタグに対してborder-leftを付与する力技もありますが、コードの見通しが悪くなってしまいます。

そこで有用なのが、divide-*シリーズです。

divide-*は子要素間に境界線を設けるユーティリティクラスです。

例えば、先にお示ししたテーブルの条件である「各行内のセル間に破線で黒色の垂直な境界線を設ける」を、divide-*を使用してスタイリングすると以下のようになります。（※行間の水平な境界線は割愛します）

<table>
    ...
    <tbody>
        <tr class="divide-x divide-dashed divide-black">
            <td></td>
            <td></td>
            <td></td>
        </tr>
        ...
    </tbody>
</table>

divide-xで水平要素間に境界線を追加
divide-dashedで境界線を破線に設定
divide-blackで境界線色を黒色に設定

何が起きているか

divide-*の中身を見てみると何が起きているかが理解できます。

例えば、devide-xの場合、以下のようなCSSになっています。

.divide-x > * + * {
    border-right-width: 0px;
    border-left-width: 1px;
}

親が .divide-x であること
.divide-x の直接の子要素であること
その要素の直前に、同じ .divide-x の直接の子要素があること

これらの条件に合致する要素に、border-right-width: 0px; border-left-width: 1px;が付与されるといった仕組みになっています。

まとめ

今回は、Tailwind CSSで要素間の境界線をスタイリングするときに便利なdivide-*をご紹介しました。

divide-*を使用すると、対象の要素それぞれにユーティリティクラスを付与する必要がなくなり、見通しのよいコードになる上、要素の追加もしやすくなると考えます。

Tailwind CSSを使用される方の一助となれば幸いです。

ご精読ありがとうございました。