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

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

---
:::note info
Tailwindcssのセットアップは下記サイトを参考にしてください。
:::
[tailwindcssのセットアップ](https://tailwindcss.com/docs/guides/vite)


<br>

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

``` App.tsx
<div className="h-24 w-24">サンプル</div>
```

<br>

この書き方でも問題はないのですが、**高さと幅が同一の値の場合**にこのようにも書くことができます。
``` App.tsx
<div className="size-24">サンプル</div>
```


<br>

2つ目: divide
---
こちらのプロパティは、並んだ要素に区切り線をつけたいときに便利です。
UIイメージ的にはこんな感じです。
<img width="300" height="300" alt="image" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2958623/02e0e897-5e16-eee4-07e6-58cd34696db0.png" />

こんな時、おそらくこのように一番下の要素だけ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>
```

<br>

これを、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>
```

結果はこのような感じになります。
<img width="300" height="300" alt="image" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2958623/1540c5a5-6253-3669-effd-f50fc8b69220.png" />

<br>

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

結果はこのようになります。
<img width="400" height="300" alt="image" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2958623/a16ab04a-312b-8c83-ef6e-94c03051e857.png" />

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

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

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


<br>

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

``` App.tsx
<div className="size-24 bg-blue-600 ring-8"></div>
```

UIイメージは以下になります。
<img width="300" alt="image" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2958623/940bb54b-9e25-ed01-5669-20319d15eacd.png" />

:::note info
ringとborderの違いは下記のqiitaの投稿を参照してください。
:::
[ringとborderの違い](https://qiita.com/NTR893/questions/0091068e6d07a9477f35#:~:text=%E3%80%8C%20ring%20%E3%80%8D%E3%81%AF%E8%A6%81%E7%B4%A0%E3%82%92%E5%9B%B2%E3%82%80,%E3%81%8C%E7%95%B0%E3%81%AA%E3%82%8B%E5%A0%B4%E5%90%88%E3%81%8C%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82)


<br>

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

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

上のプロパティ"animate-bounce"だけで下のようなUIを作成できます。
![download.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2958623/6a7a6504-d0df-c45d-f5e3-712792b3e2be.gif)

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

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

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


<br>

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


### 参考文献
- [Install Tailwind CSS with Vite](https://tailwindcss.com/docs/guides/vite)
- [CSS ringとborderの違いについて](https://qiita.com/NTR893/questions/0091068e6d07a9477f35#:~:text=%E3%80%8C%20ring%20%E3%80%8D%E3%81%AF%E8%A6%81%E7%B4%A0%E3%82%92%E5%9B%B2%E3%82%80,%E3%81%8C%E7%95%B0%E3%81%AA%E3%82%8B%E5%A0%B4%E5%90%88%E3%81%8C%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82)