【永久保存版】Tailwind CSS　チートシート 3.x対応

CDNで利用する場合は以下のコードをhead部分に記述しましょう。

<script src="https://cdn.tailwindcss.com"></script>

文字寄せ(align)

幅

基本的な使い方

設定する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;
w-[1200px]	width: 1200px;	好きな幅を指定できる。例）32rem

好きな幅を指定したい

開発をしているとpxだとかremで直接サイズ指定をしたい時があります。

そんなときも安心です。tailwindではこういったケースにも対応できます

w-[1200px], w-[32rem] のように記載することができます。

同様にmax-w-[1200px] とすると　max-width: 1200px; を適用させることが可能です。

レスポンシブ対応

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

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

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

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

高さ

基本的な使い方

設定する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)と設定することができます。

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>

角丸（rounded)

角を丸くする方法です。設定するクラスによって角の丸さが変わっていることがわかると思います。

<div class="rounded その他のクラス"></div>
<div class="rounded-md その他のクラス"></div>
<div class="rounded-lg その他のクラス"></div>
<div class="rounded-full その他のクラス"></div>

その他のプロパティ

それぞれ後ろに「xs」< 「なし」<「md」<「lg」<「xl」<「2xl」<「3xl」の順で丸さを調節できます。

色

tailwind3.xでは次のような色を使用できます。

それぞれ bg-[色の名前]-[色の濃さ]　で表現されていると思ってもらえばいいです。色の濃さは50～900で100単位です。

色の一覧

色の一覧を示します。色の濃さは一律500としています。

文字に関するプロパティ

太文字にする方法などを紹介します。

font-weight

Border

要素間に適切な枠線を設定する

x方向に対して適切に枠線を設定するには[divide-x]を設定します。

y方向の場合は[divide-y]を設定できます。

<div class="grid grid-cols-3 text-center border divide-x">
    <div>要素1</div>
    <div>要素2</div>
    <div>要素3</div>
</div>

特殊なプロパティ

状況によってはimportantで優先的にスタイルをつけたい時があると思います。その際には以下のように記述することができます。

<input type="text" class="!p-0" value="あいうえお" />

.\!p-0 {
    padding: 0!important;
}

カスタムクラス

様々なクラスが反映されたあなただけのカスタムクラスを作ることも可能です。

例えば、オリジナルのボタンのスタイルを決定する.my-btnを作成してみましょう。

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components{
    .my-btn{
        @apply rounded text-center border p-1 bg-blue-200 border-blue-600 text-white
    }
}

app.cssを更新した後はnpm run buildを実行して反映しましょう。