WEB開発

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

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

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

文字寄せ(align)

クラス プロパティ ビジュアル
text-center text-align: center; 中央寄せ
text-right text-align: right; 右寄せ
text-left text-align: left; 左寄せ
text-justify text-align: justify; 両端寄せ

基本的な使い方

設定するClass適応されるプロパティ備考
w-1/2width: 50%;1/2 = 50% の意味
w-1/3width: 33.333333%;w-2/3まで存在
w-1/4width: 25%;w-3/4まで存在
w-1/5width: 20%;w-4/5まで存在
w-1/6width: 16.666667%;w-5/6まで存在
w-1/12width: 8.333333%;w-11/12まで存在
w-fullwidth: 100%;
w-screenwidth: 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/2height: 50%;1/2 = 50% の意味
h-1/3height: 33.333333%;h-2/3まで存在
h-1/4height: 25%;h-3/4まで存在
h-1/5height: 20%;h-4/5まで存在
h-1/6height: 16.666667%;h-5/6まで存在
h-fullheight: 100%;
h-screenheight: 100vw;

レスポンシブ対応

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

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

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

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

レスポンシブ対応になっている?

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

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

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>
1
2
3

横方向に右寄せ

横方向に右寄せ(後ろから並べる)場合、「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>
1
2
3

縦方向にする

要素を縦方向に並べたい場合、「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>
1
2
3

縦方向に逆順

縦方向の逆順にしたい場合、「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>
1
2
3

横幅いっぱいに等間隔

横幅いっぱいに等間隔にするときには通常 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>
1
2
3

ちなみに「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>
1
2
3

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

スマホのような画面幅が小さい場合「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>
1
2
3

角丸(rounded)

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

rounded

rounded-md

rounded-lg

rounded-full

<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」の順で丸さを調節できます。

クラス プロパティ ビジュアル
rounded-none border-radius: 0px;
rounded-sm border-radius: 0.125rem;
rounded-t border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
rounded-r border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
rounded-b border-bottom-right-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
rounded-l border-bottom-left-radius: 0.25rem;
border-top-left-radius: 0.25rem;

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

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

色の一覧

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

クラス ビジュアル
bg-black
bg-white
bg-slate-500
bg-gray-500
bg-zinc-500
bg-neutral-500
bg-stone-500
bg-red-500
bg-orange-500
bg-amber-500
bg-yellow-500
bg-lime-500
bg-green-500
bg-emerald-500
bg-teal-500
bg-cyan-500
bg-sky-500
bg-blue-500
bg-indigo-500
bg-violet-500
bg-purple-500
bg-fuchsia-500
bg-pink-500
bg-rose-500

-WEB開発
-, ,