Tailwind CSS とは
Tailwind CSSは、モダンWebサイトのデザインを簡単に生成できるCSSフレームワークのこと。
デフォルトで多数のクラスが定義されていて、それらを指定するだけで基本的なデザインが作成できます。
<h1 className="text-2xl m-5">
<p className="text-lg m-5">
Tailiwind CSSの主なクラスを下記にて紹介します。
フォントサイズ
| text-xs |
| text-sm |
| text-base |
| text-lg |
| text-xl |
| text-整数xl |
上から下に進むに連れサイズが大きくなっていきます。
一番小さいtext-xsはだいたい12pxくらいです。
一番大きいtext-整数xlは、数字の部分に2~9の整数が指定されます。text-2xlは24pxくらい、text-9xlは128pxくらいです。
フォントスタイル
| italic | イタリックにする |
| not-italic | イタリックにしない |
フォントウェイト（太さ）
| font-thin | font-weight: 100 |
| font-extralight | font-weight: 200 |
| font-light | font-weight: 300 |
| font-normal | font-weight: 400 |
| font-medium | font-weight: 500 |
| font-semibold | font-weight: 600 |
| font-bold | font-weight: 700 |
| font-extrabold | font-weight: 800 |
| font-black | font-weight: 900 |
テキストの位置揃え
| text-left | 左揃え |
| text-center | 中央揃え |
| text-right | 右揃え |
| text-justify | 両端揃え |
| text-start | 開始位置揃え |
| text-end | 終了位置揃え |
パディング
| p-0 ~ p-96 | 周囲のパディングを指定のピクセル数だけ取る |
| px-0 ~ px-96 | 横方向のパディングを指定のピクセル数だけ取る |
| py-0 ~ py-96 | 縦方向のパディングを指定のピクセル数だけ取る |
| pt-0 ~ pt-96 | 上のパディングを指定のピクセル数だけ取る |
| pb-0 ~ pb-96 | 下のパディングを指定のピクセル数だけ取る |
| pl-0 ~ pl-96 | 左のパディングを指定のピクセル数だけ取る |
| pr-0 ~ pr-96 | 右のパディングを指定のピクセル数だけ取る |
マージン
| m-0 ~ m-96 | 周囲のマージンを指定のピクセル数だけ取る |
| mx-0 ~ mx-96 | 横方向のマージンを指定のピクセル数だけ取る |
| my-0 ~ my-96 | 縦方向のマージンを指定のピクセル数だけ取る |
| mt-0 ~ mt-96 | 上のマージンを指定のピクセル数だけ取る |
| mb-0 ~ mb-96 | 下のマージンを指定のピクセル数だけ取る |
| ml-0 ~ ml-96 | 左のマージンを指定のピクセル数だけ取る |
| mr-0 ~ mr-96 | 右のマージンを指定のピクセル数だけ取る |
横幅
| w-0 ~ w-96 | 指定ピクセル数の幅にする |
| w-auto | 自動調整 |
| w-min | 最小幅 |
| w-max | 最大幅 |
| w-full | 100%幅 |
| w-fit | 最適幅 |
高さ
| h-0 ~ h-96 | 指定ピクセル数の幅にする |
| h-auto | 自動調整 |
| h-min | 最小の高さ |
| h-max | 最大の高さ |
| h-full | 100%の高さ |
| h-fit | 最適な高さ |
テキスト色 / 背景色
| text-色-50 ~ text-色-950 |
| bg-色-50 ~ bg-色-950 |
text-red-500
のように指定する。
最後の数値は以下のいずれかを指定する。
50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
数値が小さいほど明るく薄くなり、大きくなるほど暗く濃くなっていきます。
色はred, green, blue, orange, limeなどがサポートされています。
ボーダーのスタイル
| border-solid | 一重線 |
| border-dashed | 破線 |
| border-dotted | 点線 |
| border-double | 二重線 |
| border-hidden | 非表示 |
| border-none | なし |
ボーダー幅
| border-0 ~ 8 | ボーダーの幅。数値は0, 2, 4, 6, 8のいずれかを指定 |
| border-x-0 ~ 8 | ボーダーの横方向の幅 |
| border-y-0 ~ 8 | ボーダーの縦方向の幅 |
| border-t-0 ~ 8 | ボーダーの上部の幅 |
| border-b-0 ~ 8 | ボーダーの底部の幅 |
| border-l-0 ~ 8 | ボーダーの左側の幅 |
| border-r-0 ~ 8 | ボーダーの右側の幅 |
ボーダー色
| border-色-50 ~ border-色-950 |
色と整数の指定は、テキスト色や背景色と同じです。
角の丸み
| rounded-none |
| rounded-sm |
| rounded |
| rounded-md |
| rounded-lg |
| rounded-xl |
| rounded-2xl |
| rounded-3xl |
上にあるものが最も丸みが小さく、下に進むにつれて丸みの幅が大きくなります。
テーブルレイアウト
| table-fixed | 固定幅のテーブル |
| table-auto | 自動調整幅のテーブル |
<table>のclassNameに上記のクラスを指定することで自動的にデザインされます。
