読み込み中...
Tailwind CSSのユーティリティクラスをキーワードで検索。CSSプロパティとの対応表付き。Tailwind開発の必須リファレンス。無料ツール。
183 クラスを表示中（クリックでコピー）
flex
フレックスコンテナ
display: flex
inline-flex
インラインフレックスコンテナ
display: inline-flex
flex-row
横並び（デフォルト）
flex-direction: row
flex-row-reverse
横並び逆順
flex-direction: row-reverse
flex-col
縦並び
flex-direction: column
flex-col-reverse
縦並び逆順
flex-direction: column-reverse
flex-wrap
折り返しあり
flex-wrap: wrap
flex-nowrap
折り返しなし
flex-wrap: nowrap
flex-1
伸縮自由・ベース0
flex: 1 1 0%
flex-auto
伸縮自由・ベースauto
flex: 1 1 auto
flex-none
伸縮なし
flex: none
flex-grow
伸びる
flex-grow: 1
flex-shrink
縮む
flex-shrink: 1
flex-grow-0
伸びない
flex-grow: 0
flex-shrink-0
縮まない
flex-shrink: 0
grid
グリッドコンテナ
display: grid
inline-grid
インライングリッド
display: inline-grid
grid-cols-1
1カラムグリッド
grid-template-columns: repeat(1, minmax(0, 1fr))
grid-cols-2
2カラムグリッド
grid-template-columns: repeat(2, minmax(0, 1fr))
grid-cols-3
3カラムグリッド
grid-template-columns: repeat(3, minmax(0, 1fr))
grid-cols-4
4カラムグリッド
grid-template-columns: repeat(4, minmax(0, 1fr))
grid-cols-12
12カラムグリッド
grid-template-columns: repeat(12, minmax(0, 1fr))
col-span-1
1列分のスパン
grid-column: span 1 / span 1
col-span-2
2列分のスパン
grid-column: span 2 / span 2
col-span-full
全列スパン
grid-column: 1 / -1
block
ブロック要素
display: block
inline-block
インラインブロック
display: inline-block
inline
インライン要素
display: inline
hidden
非表示
display: none
contents
コンテンツのみ表示
display: contents
items-start
交差軸: 始端揃え
align-items: flex-start
items-center
交差軸: 中央揃え
align-items: center
items-end
交差軸: 終端揃え
align-items: flex-end
items-stretch
交差軸: 伸ばす
align-items: stretch
justify-start
主軸: 始端揃え
justify-content: flex-start
justify-center
主軸: 中央揃え
justify-content: center
justify-end
主軸: 終端揃え
justify-content: flex-end
justify-between
均等配置（両端余白なし）
justify-content: space-between
justify-around
均等配置（両端余白あり）
justify-content: space-around
justify-evenly
等間隔配置
justify-content: space-evenly
m-0
マージン: 0
margin: 0px
m-1
マージン: 4px
margin: 0.25rem
m-2
マージン: 8px
margin: 0.5rem
m-4
マージン: 16px
margin: 1rem
m-8
マージン: 32px
margin: 2rem
mx-auto
水平中央揃え
margin-left: auto; margin-right: auto
mt-4
上マージン: 16px
margin-top: 1rem
mb-4
下マージン: 16px
margin-bottom: 1rem
ml-4
左マージン: 16px
margin-left: 1rem
mr-4
右マージン: 16px
margin-right: 1rem
p-0
パディング: 0
padding: 0px
p-1
パディング: 4px
padding: 0.25rem
p-2
パディング: 8px
padding: 0.5rem
p-4
パディング: 16px
padding: 1rem
p-6
パディング: 24px
padding: 1.5rem
p-8
パディング: 32px
padding: 2rem
px-4
水平パディング: 16px
padding-left: 1rem; padding-right: 1rem
py-4
垂直パディング: 16px
padding-top: 1rem; padding-bottom: 1rem
gap-1
ギャップ: 4px
gap: 0.25rem
gap-2
ギャップ: 8px
gap: 0.5rem
gap-4
ギャップ: 16px
gap: 1rem
gap-6
ギャップ: 24px
gap: 1.5rem
gap-8
ギャップ: 32px
gap: 2rem
w-full
幅: 100%
width: 100%
w-screen
幅: ビューポート幅
width: 100vw
w-auto
幅: 自動
width: auto
w-1/2
幅: 50%
width: 50%
w-1/3
幅: 33%
width: 33.333%
w-2/3
幅: 67%
width: 66.667%
w-1/4
幅: 25%
width: 25%
w-3/4
幅: 75%
width: 75%
max-w-sm
最大幅: 384px
max-width: 24rem
max-w-md
最大幅: 448px
max-width: 28rem
max-w-lg
最大幅: 512px
max-width: 32rem
max-w-xl
最大幅: 576px
max-width: 36rem
max-w-2xl
最大幅: 672px
max-width: 42rem
h-full
高さ: 100%
height: 100%
h-screen
高さ: ビューポート高さ
height: 100vh
h-auto
高さ: 自動
height: auto
h-4
高さ: 16px
height: 1rem
h-8
高さ: 32px
height: 2rem
h-16
高さ: 64px
height: 4rem
text-xs
文字サイズ: 12px
font-size: 0.75rem; line-height: 1rem
text-sm
文字サイズ: 14px
font-size: 0.875rem; line-height: 1.25rem
text-base
文字サイズ: 16px
font-size: 1rem; line-height: 1.5rem
text-lg
文字サイズ: 18px
font-size: 1.125rem; line-height: 1.75rem
text-xl
文字サイズ: 20px
font-size: 1.25rem; line-height: 1.75rem
text-2xl
文字サイズ: 24px
font-size: 1.5rem; line-height: 2rem
text-3xl
文字サイズ: 30px
font-size: 1.875rem; line-height: 2.25rem
text-4xl
文字サイズ: 36px
font-size: 2.25rem; line-height: 2.5rem
font-thin
フォントウェイト: 100
font-weight: 100
font-light
フォントウェイト: 300
font-weight: 300
font-normal
フォントウェイト: 400
font-weight: 400
font-medium
フォントウェイト: 500
font-weight: 500
font-semibold
フォントウェイト: 600
font-weight: 600
font-bold
フォントウェイト: 700
font-weight: 700
font-extrabold
フォントウェイト: 800
font-weight: 800
font-mono
等幅フォント
font-family: monospace
italic
イタリック
font-style: italic
not-italic
通常スタイル
font-style: normal
text-left
左揃え
text-align: left
text-center
中央揃え
text-align: center
text-right
右揃え
text-align: right
leading-none
行間: 1
line-height: 1
leading-tight
行間: 1.25
line-height: 1.25
leading-normal
行間: 1.5
line-height: 1.5
leading-loose
行間: 2
line-height: 2
tracking-tight
文字間隔: 狭い
letter-spacing: -0.05em
tracking-normal
文字間隔: 通常
letter-spacing: 0em
tracking-wide
文字間隔: 広い
letter-spacing: 0.05em
uppercase
大文字変換
text-transform: uppercase
lowercase
小文字変換
text-transform: lowercase
capitalize
各単語の頭文字を大文字
text-transform: capitalize
text-white
テキスト: 白
color: rgb(255 255 255)
text-black
テキスト: 黒
color: rgb(0 0 0)
text-gray-500
テキスト: グレー500
color: rgb(107 114 128)
text-red-500
テキスト: 赤500
color: rgb(239 68 68)
text-blue-500
テキスト: 青500
color: rgb(59 130 246)
text-green-500
テキスト: 緑500
color: rgb(34 197 94)
bg-white
背景: 白
background-color: rgb(255 255 255)
bg-black
背景: 黒
background-color: rgb(0 0 0)
bg-gray-100
背景: グレー100
background-color: rgb(243 244 246)
bg-gray-200
背景: グレー200
background-color: rgb(229 231 235)
bg-blue-500
背景: 青500
background-color: rgb(59 130 246)
bg-red-500
背景: 赤500
background-color: rgb(239 68 68)
bg-green-500
背景: 緑500
background-color: rgb(34 197 94)
bg-transparent
背景: 透明
background-color: transparent
border-white
ボーダー: 白
border-color: rgb(255 255 255)
border-gray-300
ボーダー: グレー300
border-color: rgb(209 213 219)
border-blue-500
ボーダー: 青500
border-color: rgb(59 130 246)
border
ボーダー: 1px
border-width: 1px
border-0
ボーダー: なし
border-width: 0px
border-2
ボーダー: 2px
border-width: 2px
border-4
ボーダー: 4px
border-width: 4px
border-t
上ボーダー: 1px
border-top-width: 1px
border-b
下ボーダー: 1px
border-bottom-width: 1px
border-solid
ボーダー: 実線
border-style: solid
border-dashed
ボーダー: 破線
border-style: dashed
border-dotted
ボーダー: 点線
border-style: dotted
rounded
角丸: 4px
border-radius: 0.25rem
rounded-sm
角丸: 2px
border-radius: 0.125rem
rounded-md
角丸: 6px
border-radius: 0.375rem
rounded-lg
角丸: 8px
border-radius: 0.5rem
rounded-xl
角丸: 12px
border-radius: 0.75rem
rounded-2xl
角丸: 16px
border-radius: 1rem
rounded-full
完全な角丸（円）
border-radius: 9999px
rounded-none
角丸なし
border-radius: 0px
shadow-sm
影: 小
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05)
shadow
影: 通常
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1)
shadow-md
影: 中
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1)
shadow-lg
影: 大
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1)
shadow-xl
影: 特大
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1)
shadow-none
影: なし
box-shadow: 0 0 #0000
opacity-0
透明度: 0%
opacity: 0
opacity-25
透明度: 25%
opacity: 0.25
opacity-50
透明度: 50%
opacity: 0.5
opacity-75
透明度: 75%
opacity: 0.75
opacity-100
透明度: 100%
opacity: 1
cursor-pointer
カーソル: ポインター
cursor: pointer
cursor-default
カーソル: デフォルト
cursor: default
overflow-hidden
はみ出し: 隠す
overflow: hidden
overflow-auto
はみ出し: 自動スクロール
overflow: auto
overflow-scroll
はみ出し: スクロール
overflow: scroll
truncate
テキスト省略
overflow: hidden; text-overflow: ellipsis; white-space: nowrap
transition
トランジション（デフォルト）
transition-property: color, background-color, border-color, ...; duration: 150ms
transition-all
全プロパティトランジション
transition-property: all; duration: 150ms
transition-colors
色トランジション
transition-property: color, background-color, ...; duration: 150ms
duration-75
トランジション時間: 75ms
transition-duration: 75ms
duration-150
トランジション時間: 150ms
transition-duration: 150ms
duration-300
トランジション時間: 300ms
transition-duration: 300ms
duration-500
トランジション時間: 500ms
transition-duration: 500ms
scale-75
スケール: 75%
transform: scale(0.75)
scale-90
スケール: 90%
transform: scale(0.90)
scale-100
スケール: 100%
transform: scale(1)
scale-110
スケール: 110%
transform: scale(1.10)
scale-125
スケール: 125%
transform: scale(1.25)
rotate-45
回転: 45度
transform: rotate(45deg)
rotate-90
回転: 90度
transform: rotate(90deg)
rotate-180
回転: 180度
transform: rotate(180deg)
translate-x-1
X軸移動: 4px
transform: translateX(0.25rem)
translate-y-1
Y軸移動: 4px
transform: translateY(0.25rem)
translate-x-full
X軸移動: 100%
transform: translateX(100%)
translate-y-full
Y軸移動: 100%
transform: translateY(100%)