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

幅

基本的な使い方

レスポンシブ対応

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

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

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

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

高さ

基本的な使い方

レスポンシブ対応

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

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

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

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

FlexBox(フレックスボックス)

tailwindcssでflexboxを利用する方法です。

基本的な使い方

<div class="flex">
    <div class="rounded border bg-yellow-500 p-3">1</div>
    <div class="rounded border bg-yellow-500 p-3">2</div>
    <div class="rounded border bg-yellow-500 p-3">3</div>
</div>

横方向に右寄せ

横方向に右寄せ（後ろから並べる）場合、「flex-row-reverse」クラスを指定します。

<div class="flex flex-row-reverse">
    <div class="rounded border bg-yellow-500 p-3">1</div>
    <div class="rounded border bg-yellow-500 p-3">2</div>
    <div class="rounded border bg-yellow-500 p-3">3</div>
</div>

縦方向にする

要素を縦方向に並べたい場合、「flex-col」クラスを指定します。

<div class="flex flex-col">
    <div class="rounded border bg-yellow-500 p-3">1</div>
    <div class="rounded border bg-yellow-500 p-3">2</div>
    <div class="rounded border bg-yellow-500 p-3">3</div>
</div>

縦方向に逆順

縦方向の逆順にしたい場合、「flex-col-reverse」クラスを指定します。

<div class="flex flex-col-reverse">
    <div class="rounded border bg-yellow-500 p-3">1</div>
    <div class="rounded border bg-yellow-500 p-3">2</div>
    <div class="rounded border bg-yellow-500 p-3">3</div>
</div>

横幅いっぱいに等間隔

横幅いっぱいに等間隔にするときには通常 flex: 1; を指定しますが、tailwindではclassに「flex-1」クラスを指定します。

<div class="flex">
    <div class="rounded border bg-yellow-500 p-3 flex-1">1</div>
    <div class="rounded border bg-yellow-500 p-3 flex-1">2</div>
    <div class="rounded border bg-yellow-500 p-3 flex-1">3</div>
</div>

ちなみに「flex-1」を指定するとflex: 1 1 0%;　が指定されます。

レスポンシブ対応を行う

スマホの場合のみflexboxを利用して横方向に並べたい場合はmd:をクラスの前に指定することで対応することができます。

<div class="md:flex">
    <div class="rounded border bg-yellow-500 p-3">1</div>
    <div class="rounded border bg-yellow-500 p-3">2</div>
    <div class="rounded border bg-yellow-500 p-3">3</div>
</div>

実際に画面の横幅を変えてみてください。

スマホのような画面幅が小さい場合「flex」は反映されないため、縦方向に通常通り項目が現れます。

PCのような横幅の大きな画面は「flex」が反映され、横方向に現れるようになります。

折り返す

Flexで折り返すようにするには「flex-wrap」クラスを指定します。

<div class="flex flex-wrap">
    <div class="rounded border bg-yellow-500 p-3 w-1/2">1</div>
    <div class="rounded border bg-yellow-500 p-3 w-1/2">2</div>
    <div class="rounded border bg-yellow-500 p-3 w-1/2">3</div>
</div>