Tailwindの便利なプロパティ5選！

はじめに

こんにちは、駆け出し始めて数年のフロントエンドエンジニアです。
タイトルにある通り、私がTailwindcssで便利だと思ったプロパティをご紹介させていただきます！
これから紹介する便利なプロパティを知らずに私は今まで開発してました、、
独断と偏見込み込みですがご容赦ください。
では早速いきましょう！

---

Tailwindcssのセットアップは下記サイトを参考にしてください。

tailwindcssのセットアップ

1つ目: size

要素の高さと幅を設定するときは、だいたい下のような書き方をしているのではないでしょうか？

App.tsx

<div className="h-24 w-24">サンプル</div>

この書き方でも問題はないのですが、高さと幅が同一の値の場合にこのようにも書くことができます。

App.tsx

<div className="size-24">サンプル</div>

2つ目: divide

こちらのプロパティは、並んだ要素に区切り線をつけたいときに便利です。
UIイメージ的にはこんな感じです。

こんな時、おそらくこのように一番下の要素だけborderを指定しない、、みたいな実装をしている方も多いのではないでしょうか？
かくいう私もこの実装方法でした。

App.tsx

<div className="bg-white">
    <div className="size-24 bg-green-700 border-b"></div>
    <div className="size-24 bg-green-700 border-b"></div>
    <div className="size-24 bg-green-700"></div>
</div>

これを、divideプロパティで書き換えてみましょう。
下のコードはわかりやすく、y軸方法にふと目の区切り線が入るようにしています。

App.tsx

<div className="bg-white divide-y-8">
    <div className="size-24 bg-green-700"></div>
    <div className="size-24 bg-green-700"></div>
    <div className="size-24 bg-green-700"></div>
</div>

結果はこのような感じになります。

3つ目: bg-gradient

こちらはグラデーションを描画するプロパティです。
cssだと、background-imageを使って実装する場合が多いですが、tailwindcssのプロパティを活用すると以下のコードのようになります。

App.tsx

<div className="h-36 w-1/2 bg-gradient-to-r from-blue-600 to-green-600 via-white"></div>

結果はこのようになります。

プロパティ説明

プロパティ名	説明	補足
bg-gradient-r	右方向にグラデーション	rの部分を変えれば様々な方向にカスタマイズできる
from-blue-600	グラデーションの開始色	Tailwindcssのcolorプロパティを指定
to-green-600	グラデーションの終了色	上に同じ
via-white	グラデーションの中間色	上に同じ

他にも、グラデーションのそれぞれの色が占める割合などをカスタマイズできたりと自由度が高い

このプロパティは、個人的にロマンを感じて好きです笑

4つ目: ring

こちらのプロパティは、要素を囲むために使われます。

App.tsx

<div className="size-24 bg-blue-600 ring-8"></div>

UIイメージは以下になります。

ringとborderの違いは下記のqiitaの投稿を参照してください。

ringとborderの違い

5つ目: animate

最後は、アニメーションを実装するためのプロパティです。
個人的にkeyframesを使ってアニメーション実装するのが面倒くさいです、、
そんな怠け者の私と同志の方は有効活用できるでしょう。

App.tsx

<div className="animate-bounce delay-50 size-24 bg-blue-600"></div>

上のプロパティ"animate-bounce"だけで下のようなUIを作成できます。

もちろん、transitionやdurationなどのプロパティでさらにカスタマイズができます。

バウンスの他にも、以下のようなアニメーションがあります。

• animate-spin
• animate-ping
• animate-pulse

ぜひ、ご自身で試してみてください！

まとめ

最後までお読みくださりありがとうございます！
tailwindにはこれ以外にも便利なプロパティがたくさんあるので、ぜひ他のものも活用してみてください。
これからも同志エンジニアの開発体験の向上に貢献できるように投稿をしていきます！

参考文献

• Install Tailwind CSS with Vite
• CSS ringとborderの違いについて