【永久保存版】Tailwind CSS　チートシート

未分類

2021.06.22

幅
1. 基本的な使い方
2. レスポンシブ対応
高さ
1. 基本的な使い方
2. レスポンシブ対応

幅

基本的な使い方

設定するClass	適応されるプロパティ	備考
w-1/2	width: 50%;	1/2 = 50% の意味
w-1/3	width: 33.333333%;	w-2/3まで存在
w-1/4	width: 25%;	w-3/4まで存在
w-1/5	width: 20%;	w-4/5まで存在
w-1/6	width: 16.666667%;	w-5/6まで存在
w-1/12	width: 8.333333%;	w-11/12まで存在
w-full	width: 100%;
w-screen	width: 100vw;

レスポンシブ対応

<div class="w-1/2 md:w-full">
    <p>テスト</p>
</div>

上記のように記載することで

横幅が小さい間は画面の1/2の幅（w-1/2)

幅が十分あるときは画面いっぱいに表示する(md:w-full)と設定することができます。

なぜこれでレスポンシブ対応ができているの？

指定したスタイルはclass要素に左記に指定した順に適応されていきます。同じプロパティが指定される場合，後ろに記載したクラスのプロパティが優先されます。

“md:”が付いたプロパティは横幅が768px以上あるときに有効になるという意味があるため，横幅が768px以上あるとき，”w-1/2”,”w-full”が同時に存在することになり，後に指定されている”w-full”が適用され，「横幅が768px以上ある場合に画面幅いっぱいに表示される」ようになります。

高さ

基本的な使い方

設定するClass	適応されるプロパティ	備考
h-1/2	height: 50%;	1/2 = 50% の意味
h-1/3	height: 33.333333%;	h-2/3まで存在
h-1/4	height: 25%;	h-3/4まで存在
h-1/5	height: 20%;	h-4/5まで存在
h-1/6	height: 16.666667%;	h-5/6まで存在
h-full	height: 100%;
h-screen	height: 100vw;

レスポンシブ対応

<div class="h-1/2 md:h-full">
    <p>テスト</p>
</div>

上記のように記載することで

横幅が小さい間は画面の1/2の高さ（h-1/2)

幅が十分あるときは画面の高さいっぱいに表示する(md:h-full)と設定することができます。

なぜこれでレスポンシブ対応ができているの？

“md:”が付いたプロパティは横幅が768px以上あるときに有効になるという意味があるため，横幅が768px以上あるとき，”h-1/2”,”h-full”が同時に存在することになり，後に指定されている”h-full”が適用され，「横幅が768px以上ある場合に画面の高さいっぱいに表示される」ようになります。