appkiro.com

Tailwind CSS チートシート

Tailwind のユーティリティクラス(余白・色・タイポ・flex/grid・エフェクト)をカテゴリ別に検索しコピーできる早見表です。

Class	CSS
`sm:`e.g. sm:flex	@media (min-width: 640px)
`md:`e.g. md:grid-cols-2	@media (min-width: 768px)
`lg:`e.g. lg:px-8	@media (min-width: 1024px)
`xl:`e.g. xl:max-w-6xl	@media (min-width: 1280px)
`2xl:`e.g. 2xl:text-lg	@media (min-width: 1536px)

Class	CSS
`block`	display: block
`inline-block`	display: inline-block
`inline`	display: inline
`flex`	display: flex
`inline-flex`	display: inline-flex
`grid`	display: grid
`inline-grid`	display: inline-grid
`hidden`	display: none
`contents`	display: contents

Class	CSS
`static`	position: static
`fixed`	position: fixed
`absolute`	position: absolute
`relative`	position: relative
`sticky`	position: sticky
`inset-0`	inset: 0
`inset-x-0`	left: 0; right: 0
`inset-y-0`	top: 0; bottom: 0
`top-0`	top: 0
`right-0`	right: 0
`bottom-0`	bottom: 0
`left-0`	left: 0

Class	CSS
`flex-row`	flex-direction: row
`flex-col`	flex-direction: column
`flex-wrap`	flex-wrap: wrap
`flex-nowrap`	flex-wrap: nowrap
`flex-1`	flex: 1 1 0%
`flex-auto`	flex: 1 1 auto
`flex-none`	flex: none
`grow`	flex-grow: 1
`grow-0`	flex-grow: 0
`shrink`	flex-shrink: 1
`shrink-0`	flex-shrink: 0

Class	CSS
`grid-cols-1`	grid-template-columns: repeat(1, minmax(0, 1fr))
`grid-cols-2`	grid-template-columns: repeat(2, minmax(0, 1fr))
`grid-cols-3`	grid-template-columns: repeat(3, minmax(0, 1fr))
`grid-cols-4`	grid-template-columns: repeat(4, minmax(0, 1fr))
`grid-cols-12`	grid-template-columns: repeat(12, minmax(0, 1fr))
`col-span-1`	grid-column: span 1 / span 1
`col-span-2`	grid-column: span 2 / span 2
`col-span-full`	grid-column: 1 / -1
`grid-rows-1`	grid-template-rows: repeat(1, minmax(0, 1fr))
`grid-rows-2`	grid-template-rows: repeat(2, minmax(0, 1fr))

Class	CSS
`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
`items-start`	align-items: flex-start
`items-center`	align-items: center
`items-end`	align-items: flex-end
`items-baseline`	align-items: baseline
`items-stretch`	align-items: stretch
`self-auto`	align-self: auto
`self-start`	align-self: flex-start
`self-center`	align-self: center
`self-end`	align-self: flex-end

Class	CSS
`p-0`	padding: 0
`p-1`	padding: 0.25rem (4px)
`p-2`	padding: 0.5rem (8px)
`p-4`	padding: 1rem (16px)
`p-6`	padding: 1.5rem (24px)
`p-8`	padding: 2rem (32px)
`px-*`	padding-left & padding-right
`py-*`	padding-top & padding-bottom
`pt/pr/pb/pl-*`	padding-[side]
`m-0`	margin: 0
`m-1`	margin: 0.25rem (4px)
`m-2`	margin: 0.5rem (8px)
`m-4`	margin: 1rem (16px)
`m-auto`	margin: auto
`-m-1`	margin: -0.25rem
`mx-auto`	margin-left: auto; margin-right: auto
`gap-0`	gap: 0
`gap-1`	gap: 0.25rem (4px)
`gap-2`	gap: 0.5rem (8px)
`gap-4`	gap: 1rem (16px)
`gap-x-*`	column-gap
`gap-y-*`	row-gap

Class	CSS
`w-0`	width: 0
`w-1`	width: 0.25rem (4px)
`w-4`	width: 1rem (16px)
`w-full`	width: 100%
`w-screen`	width: 100vw
`w-auto`	width: auto
`w-1/2`	width: 50%
`w-1/3`	width: 33.333%
`w-fit`	width: fit-content
`min-w-0`	min-width: 0
`min-w-full`	min-width: 100%
`max-w-sm`	max-width: 24rem (384px)
`max-w-md`	max-width: 28rem (448px)
`max-w-lg`	max-width: 32rem (512px)
`max-w-xl`	max-width: 36rem (576px)
`max-w-2xl`	max-width: 42rem (672px)
`max-w-full`	max-width: 100%
`max-w-screen-sm`	max-width: 640px
`max-w-screen-md`	max-width: 768px
`max-w-screen-lg`	max-width: 1024px
`h-0`	height: 0
`h-4`	height: 1rem (16px)
`h-full`	height: 100%
`h-screen`	height: 100vh
`h-auto`	height: auto
`min-h-0`	min-height: 0
`min-h-full`	min-height: 100%
`min-h-screen`	min-height: 100vh
`size-4`	width: 1rem; height: 1rem
`size-6`	width: 1.5rem; height: 1.5rem
`size-full`	width: 100%; height: 100%

Class	CSS
`text-xs`	font-size: 0.75rem (12px)
`text-sm`	font-size: 0.875rem (14px)
`text-base`	font-size: 1rem (16px)
`text-lg`	font-size: 1.125rem (18px)
`text-xl`	font-size: 1.25rem (20px)
`text-2xl`	font-size: 1.5rem (24px)
`text-3xl`	font-size: 1.875rem (30px)
`text-4xl`	font-size: 2.25rem (36px)
`font-thin`	font-weight: 100
`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-sans`	font-family: ui-sans-serif, system-ui, sans-serif
`font-serif`	font-family: ui-serif, Georgia, serif
`font-mono`	font-family: ui-monospace, monospace
`italic`	font-style: italic
`not-italic`	font-style: normal
`leading-none`	line-height: 1
`leading-tight`	line-height: 1.25
`leading-normal`	line-height: 1.5
`leading-relaxed`	line-height: 1.625
`leading-loose`	line-height: 2
`tracking-tight`	letter-spacing: -0.025em
`tracking-normal`	letter-spacing: 0
`tracking-wide`	letter-spacing: 0.025em

Class	CSS
`text-left`	text-align: left
`text-center`	text-align: center
`text-right`	text-align: right
`text-justify`	text-align: justify
`uppercase`	text-transform: uppercase
`lowercase`	text-transform: lowercase
`capitalize`	text-transform: capitalize
`normal-case`	text-transform: none
`underline`	text-decoration: underline
`line-through`	text-decoration: line-through
`no-underline`	text-decoration: none
`truncate`	overflow: hidden; text-overflow: ellipsis; white-space: nowrap
`text-ellipsis`	text-overflow: ellipsis
`text-clip`	text-overflow: clip
`whitespace-normal`	white-space: normal
`whitespace-nowrap`	white-space: nowrap
`whitespace-pre`	white-space: pre
`break-normal`	word-break: normal
`break-words`	word-break: break-word
`break-all`	word-break: break-all
`line-clamp-1`	-webkit-line-clamp: 1
`line-clamp-2`	-webkit-line-clamp: 2
`line-clamp-3`	-webkit-line-clamp: 3

Class	CSS
`bg-transparent`	background-color: transparent
`bg-current`	background-color: currentColor
`bg-white`	background-color: #fff
`bg-black`	background-color: #000
`bg-slate-500`	background-color: #64748b
`bg-[#hex]`e.g. bg-[#1da1f2]	background-color: #hex
`bg-cover`	background-size: cover
`bg-contain`	background-size: contain
`bg-center`	background-position: center
`bg-no-repeat`	background-repeat: no-repeat
`bg-repeat`	background-repeat: repeat
`bg-fixed`	background-attachment: fixed
`bg-gradient-to-r`	background-image: linear-gradient(to right, ...)
`bg-gradient-to-b`	background-image: linear-gradient(to bottom, ...)
`from-blue-500`	gradient start color
`via-purple-500`	gradient middle color
`to-pink-500`	gradient end color

Class	CSS
`border`	border-width: 1px
`border-0`	border-width: 0
`border-2`	border-width: 2px
`border-4`	border-width: 4px
`border-t`	border-top-width: 1px
`border-r`	border-right-width: 1px
`border-b`	border-bottom-width: 1px
`border-l`	border-left-width: 1px
`border-solid`	border-style: solid
`border-dashed`	border-style: dashed
`border-dotted`	border-style: dotted
`border-none`	border-style: none
`rounded`	border-radius: 0.25rem (4px)
`rounded-md`	border-radius: 0.375rem (6px)
`rounded-lg`	border-radius: 0.5rem (8px)
`rounded-xl`	border-radius: 0.75rem (12px)
`rounded-2xl`	border-radius: 1rem (16px)
`rounded-full`	border-radius: 9999px
`rounded-none`	border-radius: 0
`rounded-t-lg`	border-top-left/right-radius: 0.5rem
`divide-x`	border between horizontal children
`divide-y`	border between vertical children

Class	CSS
`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-2xl`	box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25)
`shadow-inner`	box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05)
`shadow-none`	box-shadow: none
`opacity-0`	opacity: 0
`opacity-50`	opacity: 0.5
`opacity-100`	opacity: 1
`blur`	filter: blur(8px)
`blur-sm`	filter: blur(4px)
`blur-lg`	filter: blur(16px)
`blur-none`	filter: blur(0)
`backdrop-blur`	backdrop-filter: blur(8px)
`backdrop-blur-sm`	backdrop-filter: blur(4px)

Class	CSS
`transition`	transition: all 150ms ease
`transition-none`	transition: none
`transition-colors`	transition: color, background-color, border-color
`transition-opacity`	transition: opacity 150ms
`transition-transform`	transition: transform 150ms
`duration-75`	transition-duration: 75ms
`duration-150`	transition-duration: 150ms
`duration-300`	transition-duration: 300ms
`duration-500`	transition-duration: 500ms
`ease-linear`	transition-timing-function: linear
`ease-in`	transition-timing-function: ease-in
`ease-out`	transition-timing-function: ease-out
`ease-in-out`	transition-timing-function: ease-in-out
`delay-150`	transition-delay: 150ms
`delay-300`	transition-delay: 300ms
`animate-spin`	animation: spin 1s linear infinite
`animate-ping`	animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite
`animate-pulse`	animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite
`animate-bounce`	animation: bounce 1s infinite

Class	CSS
`scale-0`	transform: scale(0)
`scale-50`	transform: scale(0.5)
`scale-100`	transform: scale(1)
`scale-150`	transform: scale(1.5)
`rotate-0`	transform: rotate(0deg)
`rotate-45`	transform: rotate(45deg)
`rotate-90`	transform: rotate(90deg)
`rotate-180`	transform: rotate(180deg)
`-rotate-45`	transform: rotate(-45deg)
`translate-x-0`	transform: translateX(0)
`translate-x-4`	transform: translateX(1rem)
`translate-x-full`	transform: translateX(100%)
`-translate-x-4`	transform: translateX(-1rem)
`translate-y-4`	transform: translateY(1rem)
`skew-x-3`	transform: skewX(3deg)
`skew-y-3`	transform: skewY(3deg)
`origin-center`	transform-origin: center
`origin-top`	transform-origin: top

Class	CSS
`cursor-pointer`	cursor: pointer
`cursor-default`	cursor: default
`cursor-not-allowed`	cursor: not-allowed
`cursor-wait`	cursor: wait
`cursor-grab`	cursor: grab
`pointer-events-none`	pointer-events: none
`pointer-events-auto`	pointer-events: auto
`select-none`	user-select: none
`select-text`	user-select: text
`select-all`	user-select: all
`resize`	resize: both
`resize-none`	resize: none
`resize-x`	resize: horizontal
`resize-y`	resize: vertical
`scroll-smooth`	scroll-behavior: smooth
`scroll-auto`	scroll-behavior: auto

Class	CSS
`hover:`e.g. hover:bg-blue-600	on mouse hover
`focus:`e.g. focus:ring-2	on focus
`focus-visible:`e.g. focus-visible:outline-none	on keyboard focus
`active:`e.g. active:bg-blue-700	on active/pressed
`disabled:`e.g. disabled:opacity-50	when disabled
`first:`e.g. first:mt-0	first child
`last:`e.g. last:mb-0	last child
`odd:`e.g. odd:bg-gray-100	odd children
`even:`e.g. even:bg-white	even children
`group-hover:`e.g. group-hover:visible	when parent .group is hovered
`peer-focus:`e.g. peer-focus:ring	when sibling .peer is focused
`dark:`e.g. dark:bg-gray-900	dark mode
`motion-safe:`e.g. motion-safe:animate-spin	if user allows motion
`motion-reduce:`e.g. motion-reduce:animate-none	if user prefers reduced motion

Class	CSS
`overflow-auto`	overflow: auto
`overflow-hidden`	overflow: hidden
`overflow-visible`	overflow: visible
`overflow-scroll`	overflow: scroll
`overflow-x-auto`	overflow-x: auto
`overflow-y-auto`	overflow-y: auto
`overflow-x-hidden`	overflow-x: hidden
`overflow-y-hidden`	overflow-y: hidden
`z-0`	z-index: 0
`z-10`	z-index: 10
`z-20`	z-index: 20
`z-30`	z-index: 30
`z-40`	z-index: 40
`z-50`	z-index: 50
`z-auto`	z-index: auto
`-z-10`	z-index: -10

Tip: Use arbitrary values with square brackets:w-[200px],text-[#1da1f2],grid-cols-[1fr_2fr]

Class

CSS

sm:e.g. sm:flex

@media (min-width: 640px)

md:e.g. md:grid-cols-2

@media (min-width: 768px)

lg:e.g. lg:px-8

@media (min-width: 1024px)

xl:e.g. xl:max-w-6xl

@media (min-width: 1280px)

2xl:e.g. 2xl:text-lg

@media (min-width: 1536px)

Class

CSS

block

display: block

inline-block

display: inline-block

inline

display: inline

flex

display: flex

inline-flex

display: inline-flex

grid

display: grid

inline-grid

display: inline-grid

hidden

display: none

contents

display: contents

Class

CSS

static

position: static

fixed

position: fixed

absolute

position: absolute

relative

position: relative

sticky

position: sticky

inset-0

inset: 0

inset-x-0

left: 0; right: 0

inset-y-0

top: 0; bottom: 0

top-0

top: 0

right-0

right: 0

bottom-0

bottom: 0

left-0

left: 0

Class

CSS

flex-row

flex-direction: row

flex-col

flex-direction: column

flex-wrap

flex-wrap: wrap

flex-nowrap

flex-wrap: nowrap

flex-1

flex: 1 1 0%

flex-auto

flex: 1 1 auto

flex-none

flex: none

grow

flex-grow: 1

grow-0

flex-grow: 0

shrink

flex-shrink: 1

shrink-0

flex-shrink: 0

Class

CSS

grid-cols-1

grid-template-columns: repeat(1, minmax(0, 1fr))

grid-cols-2

grid-template-columns: repeat(2, minmax(0, 1fr))

grid-cols-3

grid-template-columns: repeat(3, minmax(0, 1fr))

grid-cols-4

grid-template-columns: repeat(4, minmax(0, 1fr))

grid-cols-12

grid-template-columns: repeat(12, minmax(0, 1fr))

col-span-1

grid-column: span 1 / span 1

col-span-2

grid-column: span 2 / span 2

col-span-full

grid-column: 1 / -1

grid-rows-1

grid-template-rows: repeat(1, minmax(0, 1fr))

grid-rows-2

grid-template-rows: repeat(2, minmax(0, 1fr))

Class

CSS

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

items-start

align-items: flex-start

items-center

align-items: center

items-end

align-items: flex-end

items-baseline

align-items: baseline

items-stretch

align-items: stretch

self-auto

align-self: auto

self-start

align-self: flex-start

self-center

align-self: center

self-end

align-self: flex-end

Class

CSS

p-0

padding: 0

p-1

padding: 0.25rem (4px)

p-2

padding: 0.5rem (8px)

p-4

padding: 1rem (16px)

p-6

padding: 1.5rem (24px)

p-8

padding: 2rem (32px)

px-*

padding-left & padding-right

py-*

padding-top & padding-bottom

pt/pr/pb/pl-*

padding-[side]

m-0

margin: 0

m-1

margin: 0.25rem (4px)

m-2

margin: 0.5rem (8px)

m-4

margin: 1rem (16px)

m-auto

margin: auto

-m-1

margin: -0.25rem

mx-auto

margin-left: auto; margin-right: auto

gap-0

gap: 0

gap-1

gap: 0.25rem (4px)

gap-2

gap: 0.5rem (8px)

gap-4

gap: 1rem (16px)

gap-x-*

column-gap

gap-y-*

row-gap

Class

CSS

w-0

width: 0

w-1

width: 0.25rem (4px)

w-4

width: 1rem (16px)

w-full

width: 100%

w-screen

width: 100vw

w-auto

width: auto

w-1/2

width: 50%

w-1/3

width: 33.333%

w-fit

width: fit-content

min-w-0

min-width: 0

min-w-full

min-width: 100%

max-w-sm

max-width: 24rem (384px)

max-w-md

max-width: 28rem (448px)

max-w-lg

max-width: 32rem (512px)

max-w-xl

max-width: 36rem (576px)

max-w-2xl

max-width: 42rem (672px)

max-w-full

max-width: 100%

max-w-screen-sm

max-width: 640px

max-w-screen-md

max-width: 768px

max-w-screen-lg

max-width: 1024px

h-0

height: 0

h-4

height: 1rem (16px)

h-full

height: 100%

h-screen

height: 100vh

h-auto

height: auto

min-h-0

min-height: 0

min-h-full

min-height: 100%

min-h-screen

min-height: 100vh

size-4

width: 1rem; height: 1rem

size-6

width: 1.5rem; height: 1.5rem

size-full

width: 100%; height: 100%

Class

CSS

text-xs

font-size: 0.75rem (12px)

text-sm

font-size: 0.875rem (14px)

text-base

font-size: 1rem (16px)

text-lg

font-size: 1.125rem (18px)

text-xl

font-size: 1.25rem (20px)

text-2xl

font-size: 1.5rem (24px)

text-3xl

font-size: 1.875rem (30px)

text-4xl

font-size: 2.25rem (36px)

font-thin

font-weight: 100

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-sans

font-family: ui-sans-serif, system-ui, sans-serif

font-serif

font-family: ui-serif, Georgia, serif

font-mono

font-family: ui-monospace, monospace

italic

font-style: italic

not-italic

font-style: normal

leading-none

line-height: 1

leading-tight

line-height: 1.25

leading-normal

line-height: 1.5

leading-relaxed

line-height: 1.625

leading-loose

line-height: 2

tracking-tight

letter-spacing: -0.025em

tracking-normal

letter-spacing: 0

tracking-wide

letter-spacing: 0.025em

Class

CSS

text-left

text-align: left

text-center

text-align: center

text-right

text-align: right

text-justify

text-align: justify

uppercase

text-transform: uppercase

lowercase

text-transform: lowercase

capitalize

text-transform: capitalize

normal-case

text-transform: none

underline

text-decoration: underline

line-through

text-decoration: line-through

no-underline

text-decoration: none

truncate

overflow: hidden; text-overflow: ellipsis; white-space: nowrap

text-ellipsis

text-overflow: ellipsis

text-clip

text-overflow: clip

whitespace-normal

white-space: normal

whitespace-nowrap

white-space: nowrap

whitespace-pre

white-space: pre

break-normal

word-break: normal

break-words

word-break: break-word

break-all

word-break: break-all

line-clamp-1

-webkit-line-clamp: 1

line-clamp-2

-webkit-line-clamp: 2

line-clamp-3

-webkit-line-clamp: 3

Class

CSS

bg-transparent

background-color: transparent

bg-current

background-color: currentColor

bg-white

background-color: #fff

bg-black

background-color: #000

bg-slate-500

background-color: #64748b

bg-[#hex]e.g. bg-[#1da1f2]

background-color: #hex

bg-cover

background-size: cover

bg-contain

background-size: contain

bg-center

background-position: center

bg-no-repeat

background-repeat: no-repeat

bg-repeat

background-repeat: repeat

bg-fixed

background-attachment: fixed

bg-gradient-to-r

background-image: linear-gradient(to right, ...)

bg-gradient-to-b

background-image: linear-gradient(to bottom, ...)

from-blue-500

gradient start color

via-purple-500

gradient middle color

to-pink-500

gradient end color

Class

CSS

border

border-width: 1px

border-0

border-width: 0

border-2

border-width: 2px

border-4

border-width: 4px

border-t

border-top-width: 1px

border-r

border-right-width: 1px

border-b

border-bottom-width: 1px

border-l

border-left-width: 1px

border-solid

border-style: solid

border-dashed

border-style: dashed

border-dotted

border-style: dotted

border-none

border-style: none

rounded

border-radius: 0.25rem (4px)

rounded-md

border-radius: 0.375rem (6px)

rounded-lg

border-radius: 0.5rem (8px)

rounded-xl

border-radius: 0.75rem (12px)

rounded-2xl

border-radius: 1rem (16px)

rounded-full

border-radius: 9999px

rounded-none

border-radius: 0

rounded-t-lg

border-top-left/right-radius: 0.5rem

divide-x

border between horizontal children

divide-y

border between vertical children

Class

CSS

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-2xl

box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25)

shadow-inner

box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05)

shadow-none

box-shadow: none

opacity-0

opacity: 0

opacity-50

opacity: 0.5

opacity-100

opacity: 1

blur

filter: blur(8px)

blur-sm

filter: blur(4px)

blur-lg

filter: blur(16px)

blur-none

filter: blur(0)

backdrop-blur

backdrop-filter: blur(8px)

backdrop-blur-sm

backdrop-filter: blur(4px)

Class

CSS

transition

transition: all 150ms ease

transition-none

transition: none

transition-colors

transition: color, background-color, border-color

transition-opacity

transition: opacity 150ms

transition-transform

transition: transform 150ms

duration-75

transition-duration: 75ms

duration-150

transition-duration: 150ms

duration-300

transition-duration: 300ms

duration-500

transition-duration: 500ms

ease-linear

transition-timing-function: linear

ease-in

transition-timing-function: ease-in

ease-out

transition-timing-function: ease-out

ease-in-out

transition-timing-function: ease-in-out

delay-150

transition-delay: 150ms

delay-300

transition-delay: 300ms

animate-spin

animation: spin 1s linear infinite

animate-ping

animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite

animate-pulse

animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite

animate-bounce

animation: bounce 1s infinite

Class

CSS

scale-0

transform: scale(0)

scale-50

transform: scale(0.5)

scale-100

transform: scale(1)

scale-150

transform: scale(1.5)

rotate-0

transform: rotate(0deg)

rotate-45

transform: rotate(45deg)

rotate-90

transform: rotate(90deg)

rotate-180

transform: rotate(180deg)

-rotate-45

transform: rotate(-45deg)

translate-x-0

transform: translateX(0)

translate-x-4

transform: translateX(1rem)

translate-x-full

transform: translateX(100%)

-translate-x-4

transform: translateX(-1rem)

translate-y-4

transform: translateY(1rem)

skew-x-3

transform: skewX(3deg)

skew-y-3

transform: skewY(3deg)

origin-center

transform-origin: center

origin-top

transform-origin: top

Class

CSS

cursor-pointer

cursor: pointer

cursor-default

cursor: default

cursor-not-allowed

cursor: not-allowed

cursor-wait

cursor: wait

cursor-grab

cursor: grab

pointer-events-none

pointer-events: none

pointer-events-auto

pointer-events: auto

select-none

user-select: none

select-text

user-select: text

select-all

user-select: all

resize

resize: both

resize-none

resize: none

resize-x

resize: horizontal

resize-y

resize: vertical

scroll-smooth

scroll-behavior: smooth

scroll-auto

scroll-behavior: auto

Class

CSS

hover:e.g. hover:bg-blue-600

on mouse hover

focus:e.g. focus:ring-2

on focus

focus-visible:e.g. focus-visible:outline-none

on keyboard focus

active:e.g. active:bg-blue-700

on active/pressed

disabled:e.g. disabled:opacity-50

when disabled

first:e.g. first:mt-0

first child

last:e.g. last:mb-0

last child

odd:e.g. odd:bg-gray-100

odd children

even:e.g. even:bg-white

even children

group-hover:e.g. group-hover:visible

when parent .group is hovered

peer-focus:e.g. peer-focus:ring

when sibling .peer is focused

dark:e.g. dark:bg-gray-900

dark mode

motion-safe:e.g. motion-safe:animate-spin

if user allows motion

motion-reduce:e.g. motion-reduce:animate-none

if user prefers reduced motion

Class

CSS

overflow-auto

overflow: auto

overflow-hidden

overflow: hidden

overflow-visible

overflow: visible

overflow-scroll

overflow: scroll

overflow-x-auto

overflow-x: auto

overflow-y-auto

overflow-y: auto

overflow-x-hidden

overflow-x: hidden

overflow-y-hidden

overflow-y: hidden

z-0

z-index: 0

z-10

z-index: 10

z-20

z-index: 20

z-30

z-index: 30

z-40

z-index: 40

z-50

z-index: 50

z-auto

z-index: auto

-z-10

z-index: -10

Tailwind CSS チートシート

Browse and copy Tailwind utilities

1. Find a utility

2. Copy and use

Which Tailwind version does the cheatsheet match?

Can I copy a class quickly?

How do I find utilities for arbitrary values?

Does the search match CSS as well as class names?

Browse and copy Tailwind utilities

1. Find a utility

2. Copy and use

Which Tailwind version does the cheatsheet match?

Can I copy a class quickly?

How do I find utilities for arbitrary values?

Does the search match CSS as well as class names?