🎐
Tailwind CSSの便利なユーティリティクラス5選（要素間にボーダーを引く、指定行数以降を省略する、…）

2024/08/23に公開
 モチベーション最近Tailwind CSSの記述について調べていたところ、Divide Widthというユーティリティクラスに遭遇しました。
https://tailwindcss.com/docs/divide-width
Divide Widthは要素間にボーダーを引くユーティリティクラスですが、私は普段この手のデザインを
li {
  border-bottom: #000 1px solid;

  &:last-of-type {
    border: none;
  }
}
のような実装で実現しており、今回もそのノリで実装しようとしていたので大層な衝撃を受けました。もしかしてこれは、知らないだけでもっと便利なユーティリティクラスがあるのでは...？
ということでDocを一通り確認してきたので、以降ではその中で特に便利そう、知っていたら高頻度で使いそうと感じたものを紹介します。
なお、今回紹介するのはユーティリティクラスなので、Arbitrary Values(m-[5px]）等、Tailwind CSS自体の便利な記述については触れません。

 Divide Width（要素間にボーダーを引く）https://tailwindcss.com/docs/divide-width
先述の通り、要素間にボーダーを引くユーティリティクラスです。

水平/垂直はもちろん、flex-row-reverse, flex-col-reverseにも対応しています。
<div class="flex flex-col gap-16 bg-gray-200 py-16">
  <div class="mx-auto grid w-80 grid-cols-3 divide-x rounded-md bg-white">
    <div class="p-4">01</div>
    <div class="p-4">02</div>
    <div class="p-4">03</div>
  </div>

  <div class="mx-auto flex w-80 flex-col-reverse divide-y divide-y-reverse rounded-md bg-white">
    <div class="p-4">01</div>
    <div class="p-4">02</div>
    <div class="p-4">03</div>
  </div>
</div>
サンプル(Tailwind Play)
CSSとしては下記（divide-yの例）。確かにCSSで書く場合もこのように書いた方が綺麗ですね…。
.divive-y > * + * {
  border-top-width: 1px;
  border-bottom-width: 0px;
}
また、関連するユーティリティクラスとしてDivide Color（線の色）やDivide Style（線の種類）も提供されています。
<div class="flex flex-col gap-16 bg-gray-200 py-16">
  <div class="mx-auto flex w-80 flex-col divide-y divide-red-500 rounded-md bg-white">
    <div class="p-4">01</div>
    <div class="p-4">02</div>
    <div class="p-4">03</div>
  </div>

  <div class="mx-auto flex w-80 flex-col divide-y divide-red-500 divide-dotted rounded-md bg-white">
    <div class="p-4">01</div>
    <div class="p-4">02</div>
    <div class="p-4">03</div>
  </div>
</div>
サンプル(Tailwind Play)

 Line Clamp（文字を指定行数表示し、残りを省略する）https://tailwindcss.com/docs/line-clamp
Line Clampは指定行数以降の文字列を省略するユーティリティクラスです。少し前に知りましたがとても便利です。
<div class="flex flex-col gap-16 bg-gray-200 py-16">
  <div class="mx-auto w-80 rounded-md bg-white p-4">
    <p class="line-clamp-3">Rapidly build modern websites without ever leaving your HTML. A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.</p>
  </div>

  <div class="mx-auto w-80 rounded-md bg-white p-4">
    <p class="line-clamp-5">Rapidly build modern websites without ever leaving your HTML. A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.</p>
  </div>
</div>
サンプル(Tailwind Play)
CSSとしては下記（line-clamp-3の例）。4つのCSSプロパティを1つのユーティリティクラスで表現しています。
line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
注意点として、Line Clampはv3.3にて公式に組み込まれたユーティリティクラスなので、それ以前のバージョンを使用している場合は更新するか@tailwindcss/line-clampプラグインを使用する必要があります。

 Animationhttps://tailwindcss.com/docs/animation
Tailwind CSSにもトランジション・アニメーションに関するユーティリティクラスはいくつか存在するものの、アニメーションはWebサイトの目指すユーザー体験に合わせて細心の注意を払うべき場合も多いので、直接の適用は難しいことも多い印象です。
ただ、その中でもanimate-spinやanimate-pulseは気軽に使用できそうです。
<div class="flex flex-col gap-16 bg-gray-200 py-16">
  <div class="mx-auto w-80 rounded-md bg-white p-4">
    <button type="button" class="bg-indigo-500 flex px-4 py-2 rounded-md items-center text-white" disabled>
      <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
    </svg>
      Processing...
    </button>
  </div>

  <div class="mx-auto w-80 rounded-md bg-white p-4">
    <div class="animate-pulse flex space-x-4">
      <div class="rounded-full bg-slate-200 h-10 w-10"></div>
      <div class="flex-1 space-y-6 py-1">
        <div class="h-2 bg-slate-200 rounded"></div>
        <div class="space-y-3">
          <div class="grid grid-cols-3 gap-4">
            <div class="h-2 bg-slate-200 rounded col-span-2"></div>
            <div class="h-2 bg-slate-200 rounded col-span-1"></div>
          </div>
          <div class="h-2 bg-slate-200 rounded"></div>
        </div>
      </div>
    </div>
  </div>
</div>


サンプル(Tailwind Play)
アニメーションなので、サンプルを確認していただいた方がわかりやすいと思います。
ローディングUIはアニメーションの有無で与える印象もかなり変わって来る気がするので、それをユーティリティクラスひとつで実装できるのは便利そうに感じました。
CSSとしては下記（animate-pulseの例）。
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .5;
  }
}

 Container（要素の幅をブレークポイントに合わせる）https://tailwindcss.com/docs/container
Containerは、要素の幅を現在のブレークポイントに合わせるユーティリティクラスです。
sm時はmax-width: 640px,md時はmax-width: 768px、lg時はmax-width: 1024px…と、ブレークポイントに合わせて要素の幅を自動で拡縮させてくれます。
<div class="flex flex-col gap-16 bg-gray-200 py-16">
  <div class="mx-auto container rounded-md bg-white p-4">
    このエリアが拡縮します。
  </div>
</div>


サンプル(Tailwind Play)
こちらもサンプルで画面幅を変化させていただいた方がわかりやすいと思います。
望む挙動と一致している場合はかなり便利そうですが、実際はmd~lgあたりの幅をmax-widthとしたいことも多い気がするので、そのまま適用できるかはWebサイト次第に感じました。
また、Containerはあくまでブレークポイント毎のmax-widthを制御するユーティリティクラスなので、Padding, Margin等については別途記述する必要があります。

 Size（幅と高さを同時に指定する）https://tailwindcss.com/docs/size
Sizeは要素の幅と高さを同時に設定するユーティリティクラスです。
<div class="flex flex-col gap-16 bg-gray-200 py-16">
  <div class="mx-auto w-80 h-40 rounded-md bg-white p-4">
    <div class="bg-blue-500 size-24 text-white flex justify-center items-center">size-24</div>
  </div>

  <div class="mx-auto w-80 h-40 rounded-md bg-white p-4">
    <div class="bg-blue-500 size-full text-white flex justify-center items-center">size-full</div>
  </div>
</div>
サンプル(Tailwind Play)
正方形はもちろん、size-fullで親要素に合わせることもできます。
単純故に活躍する頻度も多そうですが、w-*とh-*くらいならそのまま書いてもそこまで負担にはならないので若干便利、という感じでしょうか。
アイコンを管理するコンポーネントの親要素等に指定してあげると、おさまりが良さそうに感じました。

 おわりに当然といえば当然ですが、公式に提供されているユーティリティクラスは基本的に「当該HTML要素にCSSプロパティを一つ適用」で構成されているようでした。どちらかといえばDivide *やLine Clampがやや特殊？
Place ContentやPlace Items、Accent Color、Caret Color等も便利そうですが、これらはどちらかといえば便利なCSSプロパティなので今回は除外しています。
モチベーション

Divide Width（要素間にボーダーを引く）

Line Clamp（文字を指定行数表示し、残りを省略する）

Animation

Container（要素の幅をブレークポイントに合わせる）

Size（幅と高さを同時に指定する）

おわりに

Discussion
