Tailwind CSSのチートシート

このチートシートの使い方

Tailwind CSSには、膨大なクラスが用意されています。そのため読んで学習するのではなく、必要に応じてクラス名を検索しながら挙動を確かめられるツールを目指しました。

各テーブルのセルは、クリックあるいはフォーカスしてエンターキーを押すと、内容をコピーできます。

それをプレイグラウンドにコピー＆ペーストするなどして、必要なクラスを調合いただければと思います。

ご意見・ご助言はこちらからいただければ幸いです。なお、当ツールの利用は自己責任でお願いいたします。

Tailwind CSSとは

Tailwind CSSは、あらかじめ用意された無数のクラスを組み合わせてスタイリングを行うCSSフレームワーク。

色や余白等が慎重にパターン化されており、適当に組み合わせるだけでも綺麗なレイアウトを実現できる。ただ、Tailwind CSSでのレイアウトを前提にデザインを組まないと、そのデザインを完全に再現するのは困難（となる可能性が高い）。

メリット

  • クラス名を考えずに済む
  • CSSファイルを触らずに済む
  • 階層的なスタイリングをせずに済む

デメリット

  • パターンから外れた自由度の高いデザインが難しい
  • HTMLが煩雑になる
  • 相応の学習がいる

定義される値のパターン1

Tailwind CSSが用意するクラスの多くは、プロパティの略語-プロパティ値という形で値を指定する。

プロパティ値を文字列で表現するものには、ざっくり以下のようなパターンがある。

CSSのキーワード値

font-boldのように、CSSのキーワード値がそのまま使われる。

独自の略語

フォントのサイズなどをsm、md、lg、左右をx、上下をyで表現したり、値にTailwind CSS独自の略語が含まれるパターンもある。

定義される値のパターン2

Tailwind CSSが用意するクラスの多くは、プロパティの略語-プロパティ値という形で値を指定する。

数字で表現されるものには、ざっくり以下のようなパターンがある。

無印の数値

無印の数値は、独自に体系化された、rem単位の数値と対応する。例えばpaddingやmargin、topなどの値は、以下のようなスケールで体系化されている。

範囲
増加単位
0.5-4
0.5単位(0.125rem単位)
4-12
1単位(0.25rem単位)
12-16
2単位(0.5rem単位)
20-64
4単位(1rem単位)
64-80
8単位(2rem単位)
80-96
16単位(4rem単位)

分数

分数は、%単位の数値と対応する。ただ、任意の分数を使えるわけではなく、例えばtopなどの位置系は2から4までの分母に限られる。

また、heightは2から6まで、widthは2から6と12を分母に指定できる。

任意の値

パターンにない値は、数値の部分を[]で囲む形で指定できる。

例えばp-[11px]、top-[22%]のようにする。

レスポンシブレイアウト

Tailwind CSSには、デフォルトで5つのブレイクポイントが用意されている。

接頭辞
CSS
sm
@media (min-width: 640px) { ... }
md
@media (min-width: 768px) { ... }
lg
@media (min-width: 1024px) { ... }
xl
@media (min-width: 1280px) { ... }
2xl
@media (min-width: 1536px) { ... }

例えばsm:任意のクラス名のようにすると、そのブレイクポイントのスタイルを適用できる。

なお、sm:接頭辞は640px以上のスタイルに適用されるため、モバイル用のスタイリングを行う際は無印のクラス指定で良い。

なお、max-という接頭辞をつけると、上記のブレイクポイントまでのスタイルを指定できる。例えばmax-sm:bg-red-500とすると、640px未満で背景が赤色になる。

任意にブレイクポイントを変更したいときは、tailwind.config.jsのtheme.screensに設定を追加する。

Tailwind CSS独自のクラス名

Tailwind CSSが用意する大多数のクラスは、CSS のプロパティと1対1で対応している。そのためクラス名を見れば、ある程度定義されているプロパティを類推できる。

ただ、中にはTailwind CSSが独自に導入している概念も存在する。

container
5つのブレイクポイントで、要素のmax-widthをレスポンシブに変化させるクラス。
size-*系
widthとheightに同じ値を指定するクラス。具体的な値はTailwind CSSによって体系化されたもの。
divide-*系
その要素の直下の子要素に対して、区切り線（の太さ or 色 or スタイル）を指定するクラス。
ring-*系
box-shadowを用いた、フォーカスリングのような枠線を指定するクラス。リングの幅、色、オフセット（要素と枠線の距離）、オフセットの色の4つがサポートされている。

ダークモード

ダークモード用のスタイルはdark:クラス名という形で指定する。

Tailwind CSSは、デフォルトではprefers-color-schemeを使ってダークモードとライトモードを切り替える。

トグルボタンなどで任意に切り替えたいときは、tailwind.config.jsに以下のように設定する。 

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: "selector",
// ...
};

こうすると、darkクラスが祖先に指定されている場合に、その要素のダークモード用のスタイルが適用されるようになる。

参考元： Dark Mode - Tailwind CSS

ユーザーアクション擬似クラス

擬似クラスは、他のクラスと:でつないで使う。

例えばhover:bg-blue-600のように指定する。

木構造擬似クラスほか

擬似クラスは、他のクラスと:でつないで使う。

例えば*:border-bのように指定する。

入力擬似クラス

擬似クラスは、他のクラスと:でつないで使う。

例えばdisabled:color-gray-400のように指定する。

親要素の状態に基づくスタイリング

親要素の状態に基づいて子要素をスタイリングしたいときは、親要素にgroupクラスをつけた上で、子要素にgroup-状態:任意のクラス名を指定する。

また、グループにはgroup/グループ名という形で名前をつけることができる。グループをネストする場合は、group-状態/グループ名:任意のクラス名という形にする。

親要素に指定されたセレクターに基づいて子要素をスタイリングしたいときは、group-[任意のセレクター]という形でクラスを指定する。

参考元：
https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state

兄弟要素の状態に基づくスタイリング

兄弟要素の状態に基づいて要素をスタイリングしたいときは、兄要素にpeerクラスをつけた上で、弟要素にpeer-状態:任意のクラス名を指定する（例:peer-invalid:bg-red-500）。

また、兄弟にはpeer/兄弟名という形で名前をつけることができる。兄弟名って何だ。でもピア名とするよりはましだ。複数の兄弟たちを使いわけたいときは、peer-状態/兄弟名:任意のクラス名という形にする。

兄要素に指定されたセレクターに基づいて子要素をスタイリングしたいときは、peer-[任意のセレクター]という形で兄弟名を指定する。

参考元：
https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-sibling-state

直下の子要素に対するスタイリング

直下の子要素のスタイルをまとめて指定したいときは、*:任意のクラス名という形を使う。これを指定すると、子要素にクラスを指定しても機能しない。注意したい。

また、*:dark:xxxは機能するが、*:hover:xxxは機能しない。

例えば*:dark:text-blue-500と*:hover:text-blue-500は以下のように出力される。 

.\*\:hover\:text-blue-500:hover > * {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity));
}

@media (prefers-color-scheme: dark) {
  .\*\:dark\:text-blue-500 > * {
    --tw-text-opacity: 1;
    color: rgb(59 130 246 / var(--tw-text-opacity));
  }
}

参考元：
https://tailwindcss.com/docs/hover-focus-and-other-states#styling-direct-children

子孫の有無・状態に基づくスタイリング

子孫の有無に基づいて要素をスタイリングしたいときは、has-[セレクター]:任意のクラス名という形を使う。

参考元：
https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-descendants

グループの子孫の有無・状態に基づくスタイリング

グループに特定の子孫がいるかどうかに基づいてスタイリングしたいときは、親要素にgroup、対象の要素にgroup-has-[セレクター]:任意のクラス名を指定する。

参考元：
https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-the-descendants-of-a-group

兄弟要素の子孫の有無・状態に基づくスタイリング

兄弟要素の子孫の有無・状態に基づいてスタイリングしたいときは、兄要素にpeer、弟要素にpeer-has-[セレクター]:任意のクラス名を指定する。

参考元：
https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-the-descendants-of-a-peer

ユーザーアクション擬似クラスほか

Modifier CSS
hover &:hover
focus &:focus
focus-within &:focus-within
focus-visible &:focus-visible
active &:active
visited &:visited
target &:target

参考元：
https://tailwindcss.com/docs/hover-focus-and-other-states#quick-reference

木構造擬似クラスほか

Tailwind CSS CSS
* & > *
has &:has
first &:first-child
last &:last-child
only &:only-child
odd &:nth-child(odd)
even &:nth-child(even)
first-of-type &:first-of-type
last-of-type &:last-of-type
only-of-type &:only-of-type
empty &:empty

参考元：
https://tailwindcss.com/docs/hover-focus-and-other-states#quick-reference

入力擬似クラス

Tailwind CSS CSS
disabled &:disabled
enabled &:enabled
checked &:checked
indeterminate &:indeterminate
default &:default
required &:required
valid &:valid
invalid &:invalid
in-range &:in-range
out-of-range &:out-of-range
placeholder-shown &:placeholder-shown
autofill &:autofill
read-only &:read-only

参考元：
https://tailwindcss.com/docs/hover-focus-and-other-states#quick-reference

擬似要素

擬似クラスは、他のクラスと:でつないで使う。

また、擬似要素のコンテンツはcontent-['任意のテキスト']のという形で指定できる。

例えばbefore:content-['Hello,']のように指定する。なぜかスペースを入れると表示されなくなる。なぜだ。

Tailwind CSS CSS
before &::before
after &::after
first-letter &::first-letter
first-line &::first-line
marker &::marker
selection &::selection
file &::file-selector-button
backdrop &::backdrop
placeholder &::placeholder

参考元：
https://tailwindcss.com/docs/hover-focus-and-other-states#quick-reference

メディアクエリ＆機能クエリ

Tailwind CSS CSS
sm @media (min-width: 640px)
md @media (min-width: 768px)
lg @media (min-width: 1024px)
xl @media (min-width: 1280px)
2xl @media (min-width: 1536px)
min-[…] @media (min-width: …)
max-sm @media not all and (min-width: 640px)
max-md @media not all and (min-width: 768px)
max-lg @media not all and (min-width: 1024px)
max-xl @media not all and (min-width: 1280px)
max-2xl @media not all and (min-width: 1536px)
max-[…] @media (max-width: …)
dark @media (prefers-color-scheme: dark)
portrait @media (orientation: portrait)
landscape @media (orientation: landscape)
motion-safe @media (prefers-reduced-motion: no-preference)
motion-reduce @media (prefers-reduced-motion: reduce)
contrast-more @media (prefers-contrast: more)
contrast-less @media (prefers-contrast: less)
print @media print
supports-[…] @supports (…)

参考元：
https://tailwindcss.com/docs/hover-focus-and-other-states#quick-reference

ARIA属性ほか

Tailwind CSS CSS
aria-checked &[aria-checked=“true”]
aria-disabled &[aria-disabled=“true”]
aria-expanded &[aria-expanded=“true”]
aria-hidden &[aria-hidden=“true”]
aria-pressed &[aria-pressed=“true”]
aria-readonly &[aria-readonly=“true”]
aria-required &[aria-required=“true”]
aria-selected &[aria-selected=“true”]
aria-[…] &[aria-…]
data-[…] &[data-…]
rtl [dir=“rtl”] &
ltr [dir=“ltr”] &
open &[open]

参考元：
https://tailwindcss.com/docs/hover-focus-and-other-states#quick-reference

aspect ratio

Tailwind CSS CSS
aspect-auto aspect-ratio: auto;
aspect-square aspect-ratio: 1 / 1;
aspect-video aspect-ratio: 16 / 9;

参考元：
https://tailwindcss.com/docs/aspect-ratio

container

tailwind CSS CSS
container None
width: 100%;
sm(640px)
max-width: 640px;
md(768px)
max-width: 768px;
lg(1024px)
max-width: 1024px;
xl(1280px)
max-width: 1280px;
2xl(1536px)
max-width: 1536px;

参考元：
https://tailwindcss.com/docs/container

columns

tailwind CSS CSS
columns-1 columns: 1;
columns-2 columns: 2;
columns-3 columns: 3;
columns-4 columns: 4;
columns-5 columns: 5;
columns-6 columns: 6;
columns-7 columns: 7;
columns-8 columns: 8;
columns-9 columns: 9;
columns-10 columns: 10;
columns-11 columns: 11;
columns-12 columns: 12;
columns-auto columns: auto;
columns-3xs columns: 16rem; /* 256px */
columns-2xs columns: 18rem; /* 288px */
columns-xs columns: 20rem; /* 320px */
columns-sm columns: 24rem; /* 384px */
columns-md columns: 28rem; /* 448px */
columns-lg columns: 32rem; /* 512px */
columns-xl columns: 36rem; /* 576px */
columns-2xl columns: 42rem; /* 672px */
columns-3xl columns: 48rem; /* 768px */
columns-4xl columns: 56rem; /* 896px */
columns-5xl columns: 64rem; /* 1024px */
columns-6xl columns: 72rem; /* 1152px */
columns-7xl columns: 80rem; /* 1280px */

参考元：
https://tailwindcss.com/docs/columns

break after

tailwind CSS CSS
break-after-auto break-after: auto;
break-after-avoid break-after: avoid;
break-after-all break-after: all;
break-after-avoid-page break-after: avoid-page;
break-after-page break-after: page;
break-after-left break-after: left;
break-after-right break-after: right;
break-after-column break-after: column;

参考元：
https://tailwindcss.com/docs/break-after

break before

tailwind CSS CSS
break-before-auto break-before: auto;
break-before-avoid break-before: avoid;
break-before-all break-before: all;
break-before-avoid-page break-before: avoid-page;
break-before-page break-before: page;
break-before-left break-before: left;
break-before-right break-before: right;
break-before-column break-before: column;

参考元：
https://tailwindcss.com/docs/break-before

break inside

tailwind CSS CSS
break-inside-auto break-inside: auto;
break-inside-avoid break-inside: avoid;
break-inside-avoid-page break-inside: avoid-page;
break-inside-avoid-column break-inside: avoid-column;

参考元：
https://tailwindcss.com/docs/break-inside

box decoration break

tailwind CSS CSS
box-decoration-clone box-decoration-break: clone;
box-decoration-slice box-decoration-break: slice;

参考元：
https://tailwindcss.com/docs/box-decoration-break

box sizing

tailwind CSS CSS
box-border box-sizing: border-box;
box-content box-sizing: content-box;

参考元：
https://tailwindcss.com/docs/box-sizing

display

tailwind CSS CSS
block display: block;
inline-block display: inline-block;
inline display: inline;
flex display: flex;
inline-flex display: inline-flex;
table display: table;
inline-table display: inline-table;
table-caption display: table-caption;
table-cell display: table-cell;
table-column display: table-column;
table-column-group display: table-column-group;
table-footer-group display: table-footer-group;
table-header-group display: table-header-group;
table-row-group display: table-row-group;
table-row display: table-row;
flow-root display: flow-root;
grid display: grid;
inline-grid display: inline-grid;
contents display: contents;
list-item display: list-item;
hidden display: none;

参考元：
https://tailwindcss.com/docs/display

floats

tailwind CSS CSS
float-start float: inline-start;
float-end float: inline-end;
float-right float: right;
float-left float: left;
float-none float: none;

参考元：
https://tailwindcss.com/docs/float