Tailwind CSS 치트시트

Q: responsive와 state variant는 어떻게 쓰나요?

`md:` 또는 `hover:` 같은 접두어를 유틸리티 앞에 붙이지만 사용 가능 여부와 출력은 프로젝트 설정을 따릅니다.

클래스 이름과 생성 CSS를 빠르게 찾되, 프로젝트의 Tailwind 버전과 설정을 먼저 맞추세요.

개발자·텍스트 도구

한눈에 보는 답변

Tailwind CSS 치트시트는 유틸리티 클래스, 카테고리와 대응 CSS를 검색 가능한 참고표로 제공합니다. 크롤 시점에는 304개 항목이 보였지만 이 수치는 콘텐츠 변경에 따라 달라지므로 영구적인 마케팅 문구로 쓰지 말아야 하며, 각 항목은 선언된 Tailwind 버전에 맞춰 검증해야 합니다.

유틸리티 검색 카테고리 둘러보기

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

팁: 대괄호 안에 임의 값을 사용하세요:w-[200px],text-[#1da1f2],grid-cols-[1fr_2fr]

사용 방법

원본 데이터를 입력합니다: 프로젝트의 Tailwind major/minor 버전과 커스텀 theme/plugin을 확인합니다.
필요한 설정을 선택합니다: 클래스명 또는 속성으로 검색하고 카테고리와 생성 CSS를 비교합니다.
결과를 확인하고 검증합니다: 반응형·상태 variant를 조합한 뒤 실제 빌드 출력과 브라우저에서 검증합니다.

주요 기능

검색 가능한 유틸리티 목록.
카테고리 필터.
클래스명과 생성 CSS.
반응형·상태 variant 설명.
버전·검토일 표시를 위한 구조.

활용 사례

기억나지 않는 유틸리티 빠르게 찾기.
CSS 속성에서 Tailwind 클래스 역검색.
코드 리뷰 중 클래스 의미 확인.

제한 사항 및 안전 안내

현재 항목 수와 클래스 출력은 declared version, 설정, plugin에 따라 달라질 수 있습니다. 프로젝트의 컴파일 결과를 최종 기준으로 사용합니다.
이 참고 페이지는 사용자 비밀값을 요구하지 않습니다. 검색어도 고지 없이 제3자에게 전송되어서는 안 됩니다.

문제 해결

클래스가 적용되지 않음

버전, content scan, safelist와 빌드 설정을 확인합니다.

치트시트 CSS와 다름

theme token이나 plugin override를 확인합니다.

v3 예제가 v4에서 다름

페이지의 적용 버전과 공식 문서를 비교합니다.

자주 묻는 질문

어떤 Tailwind 버전을 기준으로 하나요?

이 빌드는 Tailwind CSS 4.3.3을 사용합니다. 치트시트는 검색용 참고 자료이므로 버전에 민감한 utility는 프로젝트의 Tailwind 버전과 대조하세요.

responsive와 state variant는 어떻게 쓰나요?

md: 또는 hover: 같은 접두어를 유틸리티 앞에 붙이지만 사용 가능 여부와 출력은 프로젝트 설정을 따릅니다.

항목 수는 항상 304개인가요?

아닙니다. 크롤 시점의 표시값일 뿐이며 업데이트에 따라 바뀌므로 검색 제목이나 영구 claim으로 고정하면 안 됩니다.

안전하고 개인정보가 보호되나요?

간단히 답하면, 이 참고 페이지는 사용자 비밀값을 요구하지 않습니다. 검색어도 고지 없이 제3자에게 전송되어서는 안 됩니다.

모바일에서도 사용할 수 있나요?

레이아웃은 좁은 화면에 맞게 조정됩니다. 파일 선택, 카메라, 클립보드, 다운로드 동작은 모바일 브라우저의 권한과 지원 기능에 따라 달라집니다.

메타 태그 생성기 JavaScript 정규식 테스트기 텍스트 스크래치패드

도구 사용하기

클래스를 찾은 뒤 프로젝트 버전과 실제 빌드 CSS에서 동작을 확인하세요.