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