TailwindCSS 3.0.24
Tailwind CSS Cheat Sheet
https://www.creative-tim.com/twcomponents/cheatsheet/
※すべてのユーティリティクラス(複数のCSSプロパティ)を網羅
※中間の数字は省略 (表示:最小～最大)
※色の組み合わせは省略
Layout
Aspect Ratio
要素のアスペクト比を制御するユーティリティ。
aspect-auto
aspect-square
aspect-video
Container
現在のブレークポイントの最小幅と一致するように最大幅を設定します。
container
none
sm (640px)
md (768px)
lg (1024px)
xl (1280px)
2xl (1536px)
Columns
要素内の列数を制御するユーティリティ。
columns-1
columns-12
columns-auto
columns-3xs
columns-xs
columns-sm
columns-md
columns-lg
columns-xl
columns-7xl
Break After
要素の後に列またはページを分割する方法を制御するユーティリティ。
break-after-auto
break-after-avoid
break-after-all
break-after-avoid-page
break-after-page
break-after-left
break-after-right
break-after-column
Break Before
要素の前で列またはページを区切る方法を制御するユーティリティ。要素の前で列またはページを区切る方法を制御するユーティリティ。
break-before-auto
break-before-avoid
break-before-all
break-before-avoid-page
break-before-page
break-before-left
break-before-right
break-before-column
Break Inside
要素内で列またはページを分割する方法を制御するユーティリティ。
break-inside-auto
break-inside-avoid
break-inside-avoid-page
break-inside-column
Box Decoration Break
複数の行、列、またはページにわたって要素フラグメントをレンダリングする方法を制御するユーティリティ。
decoration-slice
decoration-clone
Box Sizing
要素の合計の幅と高さの計算方法を設定します。
box-border
box-content
Display
要素の表示ボックスのタイプを設定します。
block
inline-block
inline
flex
inline-flex
table
inline-table
table-caption
table-cell
table-column
table-column-group
table-footer-group
table-header-group
table-row-group
table-row
flow-root
grid
display: grid
inline-grid
contents
list-item
hidden
Float
要素の配置をコンテナの側面に設定し、コンテンツがその周囲を囲むようにします。
float-right
float-left
float-none
Clear
要素を先行する浮動要素の下に移動するかどうかを設定します。
clear-left
clear-right
clear-both
clear-none
Isolation
要素を先行する浮動要素の下に移動するかどうかを設定します。
isolate
isolate-auto
Object Fit
置換された要素 (img または video タグ) のコンテンツのサイズを変更する方法を設定します。
object-contain
object-cover
object-fill
object-none
object-scale-down
Object Position
選択した置換要素の配置を設定します。
object-bottom
object-center
object-left
object-left-bottom
object-left-top
object-right
object-right-bottom
object-right-top
object-top
Overflow
コンテナに対して大きすぎるコンテンツを処理する方法を設定します。
overflow-auto
overflow-x-auto
overflow-y-auto
overflow-hidden
overflow-x-hidden
overflow-y-hidden
overflow-visible
overflow-x-visible
overflow-y-visible
overflow-scroll
overflow-x-scroll
overflow-y-scroll
scrolling-touch
scrolling-auto
Overscroll Behavior
スクロール領域の境界に到達したときのブラウザの動作を制御するためのユーティリティのセット。
overscroll-auto
overscroll-y-auto
overscroll-x-auto
overscroll-contain
overscroll-y-contain
overscroll-x-contain
overscroll-none
overscroll-y-none
overscroll-x-none
Position
要素の位置を設定します。
static
fixed
absolute
relative
sticky
Top / Right / Bottom / Left
位置決めされた要素の配置を設定します。
-bottom-0
96
full
-inset-0
-96
-full
-x-0
-x-96
-x-full
-y-0
-y-96
-y-full
-left-0
96
full
-right-0
-96
-full
-top-0
-96
-full
bottom-0
-96
-auto
-full
inset-0
-96
-auto
-full
-x-0
-x-96
-x-auto
-x-full
-y-0
-y-auto
-y-full
left-0
-96
-auto
-full
right-0
-96
-auto
-full
top-0
-96
-auto
-full
Visibility
ドキュメントのレイアウトに影響を与えずに表示または非表示を切り替えます。
visible
invisible
Z-index
位置決めされた要素の Z オーダー (「スタック順序」) を設定します。
z-0
z-50
z-auto
Flexbox & Grid
Flex basis
フレックス項目の初期サイズを制御するユーティリティ。
basis-0
basis-96
basis-auto
basis-px
basis-1/2
basis-1/3
basis-2/3
basis-1/4
basis-3/4
basis-1/5
basis-4/5
basis-1/6
basis-5/6
basis-1/12
basis-11/12
basis-full
Flex Direction
フレックス項目の方向を設定します。
flex-row
flex-row-reverse
flex-col
flex-col-reverse
Flex Wrap
フレックスアイテムのラップ方法を作成します。
flex-nowrap
flex-wrap
flex-wrap-reverse
Flex
フレックス項目がどのように拡大および縮小するかを制御します。
flex-1
flex-auto
flex-initial
flex-none
Flex Grow
フレックス項目がどのように成長するかを制御します。
grow
grow-0
Flex Shrink
フレックスアイテムがどのように縮小するかを制御します。
shrink
shrink-0
Order
Grid Template Columns
grid-cols-1
grid-cols-12
grid-cols-none
Grid Column, start/end
グリッド項目のサイズとグリッド列内の位置を設定します。
col-auto
col-span-1
col-span-12
col-start-1
col-start-13
col-start-auto
col-end-1
col-end-13
col-end-auto
Grid Template Rows
グリッドレイアウトの行を定義します。
grid-rows-1
grid-rows-6
grid-rows-none
Grid Row, start/end
グリッド項目のサイズとグリッド行内の位置を設定します。
row-auto
row-span-1
row-span-6
row-start-1
row-start-7
row-start-auto
row-end-1
row-end-7
row-end-auto
Grid Auto Flow
グリッド要素の自動配置を制御します。
grid-flow-row
grid-flow-col
grid-flow-row-dense
grid-flow-col-dense
Grid Auto Columns
暗黙的に作成されるグリッド列のサイズを制御するユーティリティ。
auto-cols-auto
auto-cols-min
auto-cols-max
auto-cols-fr
Grid Auto Rows
暗黙的に作成されるグリッド行のサイズを制御するユーティリティ。
auto-rows-auto
auto-rows-min
auto-rows-max
auto-rows-fr
Gap
行と列の間にギャップ（余白）を設定します。
gap-0
gap-96
gap-x-0
gap-x-96
gap-y-0
gap-y-96
Justify Content
コンテナの主軸に沿ってフレックス項目とグリッド項目を配置する方法を制御するユーティリティ。
justify-start
justify-center
justify-end
justify-between
justify-around
justify-evenly
Justify Items
グリッド項目をインライン軸に沿って配置する方法を制御するユーティリティ。
justify-items-stretch
justify-items-start
justify-items-center
justify-items-end
Justify Self
個々のグリッド項目をインライン軸に沿って配置する方法を制御するユーティリティ。
justify-self-stretch
justify-self-start
justify-self-center
justify-self-end
justify-self-auto
Align Content
複数行のフレックス コンテナーおよびグリッド コンテナー内で行を配置する方法を制御するユーティリティ。
content-start
content-center
content-end
content-between
content-around
content-evenly
Align Items
コンテナの交差軸に沿ってフレックス項目の位置を設定します。
items-stretch
items-start
items-center
items-end
items-baseline
Align Self
個々のフレックス項目をコンテナーの交差軸に沿って配置する方法を制御します。
self-auto
self-start
self-center
self-end
self-stretch
self-baseline
Place Content
コンテンツをどのように位置調整し、同時に配置するかを制御するためのユーティリティ。
place-content-start
place-content-center
place-content-end
place-content-between
place-content-around
place-content-evenly
place-content-stretch
Place Items
項目の位置揃えと整列を同時に行う方法を制御するユーティリティ。
place-items-stretch
place-items-start
place-items-center
place-items-end
Place Self
個々のアイテムの位置揃えと整列を同時に行う方法を制御するユーティリティ。
place-self-auto
place-self-start
place-self-center
place-self-end
place-self-stretch
Sizing
Width
w-0
w-96
w-auto
w-1/2
w-1/3
w-2/3
w-1/4
w-3/4
w-1/5
w-4/5
w-1/6
w-5/6
w-1/12
w-11/12
w-full
w-screen
w-min
w-max
w-fit
Min Width
要素の最小幅を設定します。
min-w-0
min-w-full
min-w-min
min-w-max
min-w-fit
Max Width
Height
h-0
h-96
h-auto
h-1/2
h-1/3
h-2/3
h-1/4
h-3/4
h-1/5
h-4/5
h-1/6
h-5/6
h-full
h-screen
h-min
h-max
h-fit
Min Height
要素の最小の高さを設定します。
min-h-0
min-h-full
min-h-screen
min-h-min
min-h-max
min-h-fit
Max Height
要素の最大高さを設定します。
max-h-0
max-h-96
max-h-full
max-h-screen
max-h-min
max-h-max
max-h-fit
Backgrounds
Background Attachment
スクロール時の背景画像の動作を設定します。
bg-fixed
bg-local
bg-scroll
Background Clip
要素の背景の境界ボックスを制御するためのユーティリティの動作を設定します。
bg-clip-border
bg-clip-padding
bg-clip-content
bg-clip-text
Background Color
背景色を設定します。
bg-transparent
bg-current
bg-black
bg-white
bg-色-数字
Background Opacity
背景の不透明度を設定します。
bg-opacity-0
bg-opacity-100
Background Origin
要素の背景を境界線、パディング、コンテンツに対してどのように配置するかを制御するユーティリティ。
bg-origin-border
bg-origin-padding
bg-origin-content
Background Position
背景画像の位置を設定します。
bg-bottom
bg-center
bg-left
bg-left-bottom
bg-left-top
bg-right
bg-right-bottom
bg-right-top
bg-top
Background Repeat
背景画像の繰り返しを設定します。
bg-repeat
bg-no-repeat
bg-repeat-x
bg-repeat-y
bg-repeat-round
bg-repeat-space
Background Size
背景画像の背景サイズを設定します。
bg-auto
bg-cover
bg-contain
Background Image
要素の背景画像を制御するためのユーティリティ。
bg-none
bg-gradient-to-t
bg-gradient-to-tr
bg-gradient-to-r
bg-gradient-to-br
bg-gradient-to-b
bg-gradient-to-bl
bg-gradient-to-l
bg-gradient-to-tl
Gradient Color Stops
背景のグラデーションのカラーストップを制御するユーティリティ。
from-transparent
from-current
from-black
from-white
from-色-数字
via-transparent
via-current
via-black
via-white
via-色-数字
to-transparent
to-current
to-black
to-white
to-色-数字
Transforms
Scale
変換が適用された要素をスケールします。
scale-0
scale-150
scale-x-0
scale-x-150
scale-y-0
scale-y-150
Rotate
変換が適用された要素を回転します。
rotate-0
rotate-180
Translate
変換が適用された要素を変換します。
translate-x-0
translate-x-96
translate-x-1/2
translate-x-1/3
translate-x-2/3
translate-x-1/4
translate-x-3/4
translate-x-full
translate-y-0
translate-y-96
translate-y-1/2
translate-y-1/3
translate-y-2/3
translate-y-1/4
translate-y-3/4
translate-y-full
Skew
変換が適用された要素を傾けます。
skew-x-0
skew-x-12
skew-y-0
skew-y-12
Transform Origin
要素の変換の原点を設定します。原点は、要素の指定された位置に画鋲を押し込むことと考えてください。
origin-center
origin-top
origin-top-right
origin-right
origin-bottom-right
origin-bottom
origin-bottom-left
origin-left
origin-top-left
SVG
Fill
SVG 要素の塗りつぶしをスタイル設定するためのユーティリティ。
fill-current
Stroke
SVG 要素のストロークをスタイル設定するためのユーティリティ。
stroke-current
Stroke Width
SVG 要素のストローク幅をスタイル設定するためのユーティリティ。
stroke-0
stroke-2
Effects
Box Shadow
shadow-xs
shadow-sm
shadow
shadow-md
shadow-lg
shadow-xl
shadow-2xl
shadow-inner
shadow-outline
shadow-none
Opacity
opacity-0
opacity-100
Mix Blend Mode
要素が背景とどのようにブレンドされるかを制御するユーティリティ。
mix-blend-normal
mix-blend-multiply
mix-blend-screen
mix-blend-overlay
mix-blend-darken
mix-blend-lighten
mix-blend-color-dodge
mix-blend-color-burn
mix-blend-hard-light
mix-blend-soft-light
mix-blend-difference
mix-blend-exclusion
mix-blend-hue
mix-blend-saturation
mix-blend-color
mix-blend-luminosity
Background Blend Mode
要素の背景画像と背景色をどのようにブレンドするかを制御するユーティリティ。
bg-blend-normal
bg-blend-multiply
bg-blend-screen
bg-blend-overlay
bg-blend-darken
bg-blend-lighten
bg-blend-color-dodge
bg-blend-color-burn
bg-blend-hard-light
bg-blend-soft-light
bg-blend-difference
bg-blend-exclusion
bg-blend-hue
bg-blend-saturation
bg-blend-color
bg-blend-luminosity
Accessibility
Screen Readers
スクリーン リーダーによるアクセシビリティを向上させるためのユーティリティ。
sr-only
not-sr-only
Spacing
Padding
パディングを 0.25rem 単位で制御します。
p-0
p-96
py-0
py-96
pt-0
pr-0
pb-0
pl-0
pt-96
pr-96
pb-96
pl-96
Margin
マージン (および負のマージン) を 0.25rem 単位で制御します。
m-0
m-96
my-0
mx-0
my-96
mx-96
mt-0
mr-0
mb-0
ml-0
mt-96
mr-96
mb-96
ml-96
-m-0
-m-96
-my-0
-mx-0
-my-96
-mx-96
-mt-0
-mr-0
-mb-0
-ml-0
-mt-96
-mr-96
-mb-96
-ml-96
Space Between
子要素間の余白を制御します
space-x-0
space-x-96
space-x-px
-space-x-0
-space-x-96
-space-x-px
space-y-0
space-y-96
space-y-px
-space-y-0
-space-y-96
-space-y-px
space-x-reverse
space-y-reverse
Borders
Border Radius
境界線の半径を設定します。
rounded-none
rounded-sm
rounded
rounded-md
rounded-lg
rounded-xl
rounded-3xl
rounded-full
rounded-t-none
rounded-r-none
rounded-b-none
rounded-l-none
rounded-t-sm
rounded-r-sm
rounded-b-sm
rounded-l-sm
rounded-t
rounded-r
rounded-b
rounded-l
rounded-t-md
rounded-r-md
rounded-b-md
rounded-l-md
rounded-t-lg
rounded-r-lg
rounded-b-lg
rounded-l-lg
rounded-t-xl
rounded-r-xl
rounded-b-xl
rounded-l-xl
rounded-t-3xl
rounded-r-3xl
rounded-b-3xl
rounded-l-3xl
rounded-t-full
rounded-r-full
rounded-b-full
rounded-l-full
rounded-tl-none
rounded-tr-none
rounded-br-none
rounded-bl-none
rounded-tl-sm
rounded-tr-sm
rounded-br-sm
rounded-bl-sm
rounded-tl
rounded-tr
rounded-br
rounded-bl
rounded-tl-md
rounded-tr-md
rounded-br-md
rounded-bl-md
rounded-tl-lg
rounded-tr-lg
rounded-br-lg
rounded-bl-lg
rounded-tl-xl
rounded-tr-xl
rounded-br-xl
rounded-bl-xl
rounded-tl-3xl
rounded-tr-3xl
rounded-br-3xl
rounded-bl-3xl
rounded-tl-full
rounded-tr-full
rounded-br-full
rounded-bl-full
Border Width
境界線の幅を 1px 単位で設定します。
border
border-0
border-8
border-t
border-t-0
border-t-8
border-r
border-r-0
border-r-8
border-b
border-b-0
border-b-8
border-l
border-l-0
border-l-8
Border Color
境界線の色を設定します。
border-transparent
border-current
border-black
border-white
border-色-数字
Border Opacity
境界線の不透明度を設定します。
border-opacity-0
border-opacity-100
Border Style
境界線のスタイルを設定します。
border-solid
border-dashed
border-dotted
border-double
border-hidden
border-none
Divide Width
要素間の境界線の幅を制御します。
divide-x-0
divide-x-8
divide-x
divide-y-0
divide-y-8
divide-y
divide-x-reverse
divide-y-reverse
Divide Color
要素間の境界線の色を制御します。
divide-transparent
divide-current
divide-black
divide-white
divide-色-数字
Divide Opacity
要素間の境界の不透明度を制御します。
divide-opacity-0
divide-opacity-100
Divide Style
分割のスタイルを設定します。
divide-solid
divide-dashed
divide-dotted
divide-double
divide-none
Outline Width
要素のアウトラインの幅を制御するユーティリティ。
outline-0
outline-8
Outline Style
要素のアウトラインのスタイルを制御するユーティリティ。
outline
outline-dashed
outline-dotted
outline-double
outline-none
Outline Offset
要素のアウトラインのオフセットを制御するユーティリティ。
outline-offset-0
outline-offset-8
Ring Width
ボックスシャドウを使用してアウトラインリングを作成するためのユーティリティ。
ring-0
ring-8
ring
ring-inset
Ring Color
アウトラインリングの色を設定するためのユーティリティ。
ring-transparent
ring-current
ring-black
ring-white
ring-色-数字
Ring Opacity
アウトラインリングの不透明度を設定するユーティリティ。
ring-opacity-0
ring-opacity-100
Ring Offset Width
アウトライン リングを追加するときにオフセットをシミュレートするユーティリティ。
ring-offset-0
ring-offset-8
Ring Offset Color
アウトラインリングのオフセットの色を設定するユーティリティ。
ring-offset-transparent
ring-offset-current
ring-offset-black
ring-offset-white
ring-offset-色-数字
Typography
Font Family
フォントファミリーを設定します。
font-sans
font-serif
font-mono
Font Size
フォントサイズを設定します。
text-xs
text-sm
text-base
text-lg
text-xl
text-9xl
Font Smoothing
antialiased
subpixel-antialiased
Font Style
italic
not-italic
Font Weight
フォントの太さを設定します。
font-thin
font-extralight
font-light
font-normal
font-medium
font-semibold
font-bold
font-extrabold
font-black
Font Variant Numeric
数値のバリアントを制御するためのユーティリティ。
normal-nums
ordinal
slashed-zero
lining-nums
oldstyle-nums
proportional-nums
tabular-nums
diagonal-fractions
stacked-fractions
Letter Spacing
文字間の間隔を設定します。
tracking-tighter
tracking-tight
tracking-normal
tracking-wide
tracking-wider
tracking-widest
Line Height
行の高さを設定します。
leading-none
leading-tight
leading-snug
leading-normal
leading-relaxed
leading-loose
leading-3
leading-4
leading-5
leading-6
leading-7
leading-8
leading-9
leading-10
List Style Type
リストの箇条書きスタイルを設定します。
list-none
list-disc
list-decimal
List Style Position
リストの箇条書きの位置を設定します。
list-inside
list-outside
Text Align
テキストの配置を設定します。
text-left
text-center
text-right
text-justify
Text Color
文字の色を設定します。
text-transparent
text-current
text-black
text-white
text-色-数字
Text Decoration
テキストの装飾を制御するためのユーティリティ。
underline
overline
line-through
no-underline
Text Decoration Style
テキスト装飾のスタイルを制御するためのユーティリティ。
decoration-solid
decoration-double
decoration-dotted
decoration-dashed
decoration-wavy
Text Decoration Thickness
テキスト装飾の太さを制御するユーティリティ。
decoration-auto
decoration-from-font
decoration-0
decoration-8
Text Underline Offset
テキストの下線のオフセットを制御するユーティリティ。
underline-offset-auto
underline-offset-from-font
underline-offset-0
underline-offset-8
Text Transform
テキストの変換を制御するユーティリティ。
uppercase
lowercase
capitalize
normal-case
Text Overflow
要素内のテキストのオーバーフローを制御するユーティリティ。
truncate
text-ellipsis
text-clip
Text Indent
ブロック内のテキストの前に表示される空きスペースの量を制御するユーティリティ。
indent-0
indent-96
indent-px
Vertical Align
インラインまたはテーブルセルボックスの垂直方向の配置を設定します。
align-baseline
align-top
align-middle
align-bottom
align-text-top
align-text-bottom
align-sub
align-super
White Space
要素の空白を設定します。
whitespace-normal
whitespace-nowrap
whitespace-pre
whitespace-pre-line
whitespace-pre-wrap
Word Break
要素の単語区切りを設定します。
break-normal
break-words
break-all
Content
前後の疑似要素の内容を制御するためのユーティリティ。
content-none
Transitions & Animation
Transition Property
トランジションアニメーションの影響を受ける CSS プロパティを設定します。
transition
transition-none
transition-all
transition-colors
transition-opacity
transition-shadow
transition-transform
Transition Duration
トランジション アニメーションが完了するまでの時間を設定します。
uration-75
duration-1000
Transition Timing Function
トランジションアニメーションのイージング機能を設定します。
ease-linear
ease-in
ease-out
ease-in-out
Transition Delay
遷移遅延の影響を受ける CSS プロパティを設定します。
delay-75
delay-1000
Animation
CSS アニメーションを使用して要素をアニメーション化するためのユーティリティ。
animate-spin
animate-ping
animate-pulse
animate-bounce
Interactivity
Appearance
オペレーティング システムのテーマに基づいたネイティブ スタイルを無効にします。
appearance-none
Cursor
要素の上にマウスを置くとカーソルが変わります。
cursor-auto
cursor-default
cursor-pointer
cursor-wait
cursor-text
cursor-move
cursor-help
cursor-not-allowed
cursor-none
cursor-context-menu
cursor-progress
cursor-cell
cursor-crosshair
cursor-vertical-text
cursor-alias
cursor-copy
cursor-no-drop
cursor-grab
cursor-grabbing
cursor-all-scroll
cursor-col-resize
cursor-row-resize
cursor-n-resize
cursor-e-resize
cursor-s-resize
cursor-w-resize
cursor-ne-resize
cursor-nw-resize
cursor-se-resize
cursor-sw-resize
cursor-ew-resize
cursor-ns-resize
cursor-nesw-resize
cursor-nwse-resize
cursor-zoom-in
cursor-zoom-out
Pointer Events
要素がマウス イベントのターゲットであるかどうかを指定します。
pointer-events-none
pointer-events-auto
Resize
要素のサイズを変更できるかどうか、および方向を設定します。
resize-none
resize
resize-y
resize-x
Scroll Behavior
要素のスクロール動作を制御するユーティリティ。
scroll-auto
scroll-smooth
Scroll Margin
スナップ コンテナ内の項目の周囲のスクロール オフセットを制御するユーティリティ。
scroll-m-0
scroll-m-96
scroll-my-0
scroll-mx-0
scroll-my-96
scroll-mx-96
scroll-mt-0
scroll-mr-0
scroll-mb-0
scroll-ml-0
scroll-mt-96
scroll-mr-96
scroll-mb-96
scroll-ml-96
Scroll Padding
スナップコンテナ内の要素のスクロールオフセットを制御するユーティリティ。
scroll-p-0
scroll-p-96
scroll-py-0
scroll-py-96
scroll-pt-0
scroll-pr-0
scroll-pb-0
scroll-pl-0
scroll-pt-96
scroll-pr-96
scroll-pb-96
scroll-pl-96
Scroll Snap Align
要素のスクロール スナップの配置を制御するユーティリティ。
snap-start
snap-end
snap-center
snap-align-none
Scroll Snap Stop
可能なスナップ位置を超えてスキップできるかどうかを制御するユーティリティ。
snap-normal
snap-always
Scroll Snap Type
スナップ コンテナ内でスナップ ポイントをどの程度厳密に適用するかを制御するユーティリティ。
snap-none
snap-x
snap-y
snap-both
snap-mandatory
snap-proximity
Touch Action
タッチスクリーン上で要素をスクロールおよびズームする方法を制御するユーティリティ。
touch-auto
touch-none
touch-pan-x
touch-pan-left
touch-pan-right
touch-pan-y
touch-pan-up
touch-pan-down
touch-pinch-zoom
touch-manipulation
User Select
ユーザーがテキストを選択できるかどうかを制御します。
select-none
select-text
select-all
select-auto
Will Change
変更が予想される要素の今後のアニメーションを最適化するためのユーティリティ。
will-change-auto
will-change-scroll
will-change-contents
will-change-transform
Tables
Border Collapse
テーブルの境界線を折りたたむか分離します。
border-collapse
border-separate
Table Layout
テーブルのセル、行、列のレイアウトに使用されるアルゴリズムを定義します。
table-auto
table-fixed
Filters
Blur
要素にぼかしフィルターを適用するためのユーティリティ。
blur-none
blur-sm
blur
blur-md
blur-lg
blur-xl
blur-2xl
blur-3xl
Brightness
要素に明るさフィルターを適用するためのユーティリティ。
brightness-0
brightness-200
Contrast
要素にコントラスト フィルターを適用するためのユーティリティ。
contrast-0
contrast-200
Drop Shadow
要素にドロップシャドウ フィルターを適用するためのユーティリティ。
drop-shadow-sm
drop-shadow
drop-shadow-md
drop-shadow-lg
drop-shadow-xl
drop-shadow-2xl
drop-shadow-none
Grayscale
要素にグレースケール フィルターを適用するためのユーティリティ。
grayscale-0
grayscale
Hue Rotate
色相回転フィルターを要素に適用するためのユーティリティ。
hue-rotate-0
hue-rotate-180
Invert
要素に反転フィルターを適用するためのユーティリティ。
invert-0
invert
Saturate
要素に彩度フィルターを適用するためのユーティリティ。
saturate-0
saturate-200
Sepia
要素にセピア フィルターを適用するためのユーティリティ。
sepia-0
sepia
Backdrop Blur
背景ぼかしフィルターを要素に適用するためのユーティリティ。
backdrop-blur-none
backdrop-blur-sm
backdrop-blur
backdrop-blur-md
backdrop-blur-lg
backdrop-blur-xl
backdrop-blur-2xl
backdrop-blur-3xl
Backdrop Brightness
背景の明るさフィルターを要素に適用するためのユーティリティ。
backdrop-brightness-0
backdrop-brightness-sm
backdrop-brightness
backdrop-brightness-md
backdrop-brightness-lg
backdrop-brightness-xl
backdrop-brightness-3xl
Backdrop Contrast
要素に背景コントラスト フィルターを適用するためのユーティリティ。
backdrop-contrast-0
backdrop-contrast-200
Backdrop Grayscale
背景グレースケール フィルターを要素に適用するためのユーティリティ。
backdrop-grayscale-0
backdrop-grayscale
Backdrop Hue Rotate
背景の色相回転フィルターを要素に適用するためのユーティリティ。
backdrop-hue-rotate-0
backdrop-hue-rotate-180
Backdrop Invert
背景反転フィルターを要素に適用するためのユーティリティ。
backdrop-invert-0
backdrop-invert
Backdrop Opacity
背景の不透明度フィルターを要素に適用するためのユーティリティ。
backdrop-opacity-0
backdrop-opacity-100
Backdrop Saturate
背景の彩度フィルターを要素に適用するためのユーティリティ。
backdrop-saturate-0
backdrop-saturate-200
Backdrop Sepia
背景セピアフィルターを要素に適用するためのユーティリティ。
backdrop-sepia-0
backdrop-sepia