レイアウト
-
container: コンテナの幅を設定 -
box-border: ボックスモデルのボーダーを含む -
box-content: ボックスモデルのコンテンツのみ -
flex: フレックスボックスの設定 -
grid: グリッドレイアウトの設定 -
space-x-{n}: フレックスアイテム間の水平スペース -
space-y-{n}: フレックスアイテム間の垂直スペース
使用例
-
container mx-auto: コンテナを中央揃え -
flex justify-center: フレックスアイテムを中央揃え -
grid grid-cols-3: 3列のグリッドレイアウト -
space-x-4: フレックスアイテム間に4の水平スペース -
space-y-4: フレックスアイテム間に4の垂直スペース
スペース（マージン・パディング）
-
m-{n}: 全体のマージン -
mt-{n}: 上のマージン -
mb-{n}: 下のマージン -
ml-{n}: 左のマージン -
mr-{n}: 右のマージン -
mx-{n}: 左右のマージン -
my-{n}: 上下のマージン -
p-{n}: 全体のパディング -
pt-{n}: 上のパディング -
pb-{n}: 下のパディング -
pl-{n}: 左のパディング -
pr-{n}: 右のパディング -
px-{n}: 左右のパディング -
py-{n}: 上下のパディング
使用例
-
m-4: 全体に4のマージン -
mt-2: 上に2のマージン -
mb-6: 下に6のマージン -
px-8: 左右に8のパディング -
py-4: 上下に4のパディング
サイズ（幅、高さ）
-
w-{n}: 幅 -
h-{n}: 高さ -
min-w-{n}: 最小幅 -
min-h-{n}: 最小高さ -
max-w-{n}: 最大幅 -
max-h-{n}: 最大高さ -
0:0px -
1/2:50% -
1/3:33.333333% -
2/3:66.666667% -
1/4:25% -
3/4:75% -
1/5:20% -
2/5:40% -
3/5:60% -
4/5:80% -
1/6:16.666667% -
5/6:83.333333% -
full:100% -
screen: ビューポート全体（例えばw-screenやh-screen） -
auto: 自動調整（例えばw-autoやh-auto）
使用例
-
w-full: 幅を100%に設定 -
h-screen: 高さをビューポート全体に設定 -
min-w-0: 最小幅を0に設定 -
max-w-lg: 最大幅を大に設定 -
h-16: 高さを16に設定
単位
-
{n}px: ピクセル単位 -
{n}rem: rem単位
サイズのプリセット
-
xs:20rem(320px) -
sm:24rem(384px) -
md:28rem(448px) -
lg:32rem(512px) -
xl:36rem(576px) -
2xl:42rem(672px) -
3xl:48rem(768px)
使用例
-
max-w-xs: 最大幅を320pxに設定 -
max-w-sm: 最大幅を384pxに設定 -
max-w-md: 最大幅を448pxに設定 -
max-w-lg: 最大幅を512pxに設定 -
max-w-xl: 最大幅を576pxに設定 -
max-w-2xl: 最大幅を672pxに設定 -
max-w-3xl: 最大幅を768pxに設定 -
min-w-xs: 最小幅を320pxに設定 -
min-w-sm: 最小幅を384pxに設定 -
min-w-md: 最小幅を448pxに設定 -
min-w-lg: 最小幅を512pxに設定 -
min-w-xl: 最小幅を576pxに設定 -
min-w-2xl: 最小幅を672pxに設定 -
min-w-3xl: 最小幅を768pxに設定
使えないパターン
-
w-xs: 幅を320pxに設定（使えない） -
h-sm: 高さを384pxに設定（使えない）
色
-
bg-{color}: 背景色 -
text-{color}: 文字色 -
border-{color}: ボーダー色 -
divide-{color}: フレックスアイテム間の分割線の色
使用例
-
bg-blue-500: 背景色を青に設定 -
text-white: 文字色を白に設定 -
border-gray-300: ボーダー色を灰色に設定 -
divide-red-500: 分割線の色を赤に設定 -
bg-opacity-50: 背景の不透明度を50%に設定
タイポグラフィ
-
text-{size}: 文字サイズ -
font-{family}: フォントファミリー -
font-{weight}: フォントウェイト -
leading-{size}: 行の高さ（line-height） -
tracking-{size}: 文字間のスペース（letter-spacing）
使用例
-
text-lg: 文字サイズを大に設定 -
font-sans: サンセリフフォントを使用 -
font-bold: 太字に設定 -
leading-tight: 行の高さを詰める -
tracking-wide: 文字間のスペースを広げる
文字サイズのプリセット
-
xs:0.75rem(12px) -
sm:0.875rem(14px) -
base:1rem(16px) -
lg:1.125rem(18px) -
xl:1.25rem(20px) -
2xl:1.5rem(24px) -
3xl:1.875rem(30px)
使用例
-
text-xs: 文字サイズを12pxに設定 -
text-sm: 文字サイズを14pxに設定 -
text-base: 文字サイズを16pxに設定 -
text-lg: 文字サイズを18pxに設定 -
text-xl: 文字サイズを20pxに設定 -
text-2xl: 文字サイズを24pxに設定 -
text-3xl: 文字サイズを30pxに設定
使えないパターン
-
font-xs: フォントサイズを12pxに設定（使えない） -
font-sm: フォントサイズを14pxに設定（使えない）
ボーダー
-
border: 全体のボーダー -
border-{side}: 特定の辺のボーダー（border-t,border-b,border-l,border-r） -
border-{width}: ボーダーの幅（border-2,border-4など） -
rounded-{size}: ボーダーの角を丸くする（rounded-lg,rounded-fullなど）
使用例
-
border: 全体にボーダーを設定 -
border-t-2: 上に2のボーダーを設定 -
border-b-4: 下に4のボーダーを設定 -
rounded-lg: 角を大きく丸くする -
rounded-full: 角を完全に丸くする
背景
-
bg-{color}: 背景色 -
bg-opacity-{n}: 背景の不透明度
使用例
-
bg-green-500: 背景色を緑に設定 -
bg-opacity-75: 背景の不透明度を75%に設定 -
bg-gradient-to-r: 右方向へのグラデーション背景 -
bg-fixed: 固定背景 -
bg-cover: 背景をカバーする
フレックスボックスとグリッド
-
flex: フレックスコンテナ -
inline-flex: インラインフレックスコンテナ -
flex-{direction}: フレックスアイテムの方向（flex-row,flex-colなど） -
flex-wrap: フレックスアイテムの折り返し -
items-{alignment}: フレックスアイテムの整列（items-center,items-startなど） -
justify-{alignment}: フレックスアイテムの配置（justify-center,justify-betweenなど） -
gap-{n}: グリッドとフレックスアイテム間のギャップ
使用例
-
flex: フレックスコンテナを設定 -
inline-flex: インラインフレックスコンテナを設定 -
flex-row: フレックスアイテムを横方向に配置 -
items-center: フレックスアイテムを中央に整列 -
justify-between: フレックスアイテムを両端に配置
表示と配置
-
hidden: 非表示 -
block: ブロック表示 -
inline-block: インラインブロック表示 -
inline: インライン表示 -
flex: フレックス表示 -
grid: グリッド表示 -
table: テーブル表示 -
absolute: 絶対位置 -
relative: 相対位置 -
fixed: 固定位置 -
sticky: スティッキー位置
使用例
-
hidden: 要素を非表示にする -
block: 要素をブロック表示にする -
inline-block: 要素をインラインブロック表示にする -
absolute: 要素を絶対位置に配置 -
relative: 要素を相対位置に配置
その他のユーティリティ
-
shadow-{size}: シャドウ（shadow-sm,shadow-md,shadow-lgなど） -
opacity-{n}: 不透明度 -
transition: トランジション -
transform: 変形（scale,rotateなど） -
z-{n}: z-index
使用例
-
shadow-md: 中程度のシャドウを設定 -
opacity-50: 不透明度を50%に設定 -
transition-all: 全てのプロパティにトランジションを適用 -
transform scale-105: 要素を105%に拡大 -
z-10: z-indexを10に設定
単位
-
{n}px: ピクセル単位 -
{n}rem: rem単位 -
{n}%: パーセント単位 -
{n}vh: ビューポート高さ単位 -
{n}vw: ビューポート幅単位
使用例
-
w-1/2: 幅を50%に設定 -
h-1/3: 高さを33.333%に設定 -
w-1/4: 幅を25%に設定 -
h-1/6: 高さを16.666%に設定 -
w-full: 幅を100%に設定
スペーシング（マージン、パディング）
Tailwind CSSでは、スペーシングのためにさまざまなプリセット値が用意されています。基本的な単位はremベースですが、特定の値にはピクセルやパーセントも使用されます。
-
0:0rem(0px) -
1:0.25rem(4px) -
2:0.5rem(8px) -
3:0.75rem(12px) -
4:1rem(16px) -
5:1.25rem(20px) -
6:1.5rem(24px) -
8:2rem(32px) -
10:2.5rem(40px) -
12:3rem(48px) -
16:4rem(64px) -
20:5rem(80px) -
24:6rem(96px) -
32:8rem(128px) -
40:10rem(160px) -
48:12rem(192px) -
56:14rem(224px) -
64:16rem(256px) -
px:1px(1ピクセル) -
0.5:0.125rem(2px) -
1.5:0.375rem(6px) -
2.5:0.625rem(10px) -
3.5:0.875rem(14px)
使用例
-
m-4: 全体に4のマージン -
mt-2: 上に2のマージン -
mb-6: 下に6のマージン -
px-8: 左右に8のパディング -
py-4: 上下に4のパディング
レスポンシブデザイン
Tailwind CSSでは、レスポンシブデザインを簡単に実現するためにブレークポイントが用意されています。以下はそのブレークポイントです。
-
sm: 640px 以上 -
md: 768px 以上 -
lg: 1024px 以上 -
xl: 1280px 以上 -
2xl: 1536px 以上
使用例
-
sm:bg-red-500: 640px 以上の画面幅で背景色を赤に設定 -
md:text-lg: 768px 以上の画面幅で文字サイズを大きく設定 -
lg:w-1/2: 1024px 以上の画面幅で幅を50%に設定 -
xl:p-8: 1280px 以上の画面幅でパディングを8に設定 -
2xl:mt-4: 1536px 以上の画面幅で上のマージンを4に設定
auto
-
m-auto: マージンを自動設定 -
mx-auto: 左右のマージンを自動設定 -
my-auto: 上下のマージンを自動設定 -
w-auto: 幅を自動設定 -
h-auto: 高さを自動設定
使用例
-
m-auto: 要素を中央に配置 -
mx-auto: 要素を左右中央に配置 -
my-auto: 要素を上下中央に配置 -
w-auto: 幅をコンテンツに合わせて自動調整 -
h-auto: 高さをコンテンツに合わせて自動調整