[TailwindCSS] 자주 쓰이는 유틸리티 클래스 모음

레이아웃

# display

  - https://tailwindcss.com/docs/display

class	CSS
block	display: block
inline-block	display: inline-block
flex	display: flex
table	display: table
grid	display: grid
hidden	display: none

 

# object-fit

  - <img> 태그 내 이미지 크기 맞춤 설정

  - https://tailwindcss.com/docs/object-fit

class	CSS
object-contain	object-fit: contain;
object-cover	object-fit: cover;
object-fill	object-fit: fill;
object-none	object-fit: none;
object-scale-down	object-fit: scale-down;

 

# overflow

  - https://tailwindcss.com/docs/overflow

class	CSS
overflow-auto	overflow: auto;
overflow-hidden	overflow: hidden;
overflow-scroll	overflow: scroll;
overflow-visible	overflow: visible;
overflow-x-*	overflow-x: *;
overflow-y-*	overflow-y: *;

 

# position

  - https://tailwindcss.com/docs/position

class	CSS
static	position: static;
fixed	position: fixed;
absolute	position: absolute;
relative	position: relative;
sticky	position: sticky;

 

# top / right / bottom / left

  - https://tailwindcss.com/docs/top-right-bottom-left

class	CSS
top-0	top: 0px;
right-0	right: 0px;
bottom-0	bottom: 0px;
left-0	left: 0px;
{방향}-0.5	{방향}: 0.125rem; /* 2px */
{방향}-[...px]	{방향}: ...px;

 

# z-index

  - https://tailwindcss.com/docs/z-index

class	CSS
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;

 

 

---

플렉스박스

# flex-direction

  - https://tailwindcss.com/docs/flex-direction

class	CSS
flex-row (기본값)	flex-direction: row;
flex-col	flex-direction: column;

 

# flex-wrap

  - https://tailwindcss.com/docs/flex-wrap

class	CSS
flex-wrap	flex-wrap: wrap;
flex-nowrap	flex-wrap: nowrap;

 

# justify-content

  - https://tailwindcss.com/docs/justify-content

class	CLASS
justify-start	justify-content: flex-start;
justify-end	justify-content: flex-end;
justify-center	justify-content: center;
justify-between	justify-content: space-between;
justify-around	justify-content: space-around;
justify-stretch	justify-content: stretch;

 

# align-items

  - https://tailwindcss.com/docs/align-items

class	CSS
items-start	align-items: flex-start;
items-end	align-items: flex-end;
items-center	align-items: center;
items-stretch	align-items: stretch;

 

# gap

  - https://tailwindcss.com/docs/gap

class	CSS
gap-[...px]	gap: ...px;
gap-x-[...px]	column-gap: ...px;
gap-y-[...px]	row-gap: ...px;

 

 

---

여백

# padding

  - https://tailwindcss.com/docs/padding

class	CSS
p-*	padding: *;
px-*	padding-left: *; padding-right: *;
py-*	padding-top: *; padding-bottom: *;
pt-*	padding-top: *;
pr-*	padding-right: *;
pb-*	padding-bottom: *;
pl-*	padding-left: *;

 

# margin

  - https://tailwindcss.com/docs/margin

class	CSS
m-*	margin: *;
mx-*	margin-left: *; margin-right: *;
my-*	margin-top: *; margin-bottom: *;
mt-*	margin-top: *;
mr-*	margin-right: *;
mb-*	margin-bottom: *;
ml-*	margin-left: *;

 

# 자식 요소 사이의 margin

  - https://tailwindcss.com/docs/space

class	CSS
space-x-*	margin-left: *;
space-y-*	margin-top: *;

 

 

---

사이즈

# width

  - https://tailwindcss.com/docs/width

class	CSS
w-*	width: *;
w-full	width: 100%;
w-screen	width: 100vw;
w-auto	width: auto;
w-1/2	width: 50%;

 

# min-width

  - https://tailwindcss.com/docs/min-width

class	CSS
min-w-*	min-width: *;

 

# max-width

  - https://tailwindcss.com/docs/max-width

class	CSS
max-w-*	max-width: *;

 

# height

  - https://tailwindcss.com/docs/height

class	CSS
h-*	height: *;
h-full	height: 100%;
h-screen	height: 100vh;
h-auto	height: auto;
h-1/2	height: 50%;

 

# width + height

  - https://tailwindcss.com/docs/size

class	CSS
size-*	width: *; height: *;

 

 

---

색상

  - 기본 색상 팔레트 : https://tailwindcss.com/docs/customizing-colors

# color

  - https://tailwindcss.com/docs/text-color

class	CSS
text-*	color: *;

 

# text-decoration-color

  - https://tailwindcss.com/docs/text-decoration-color

class	CSS
decoration-*	text-decoration-color: *;

 

# background-color

  - https://tailwindcss.com/docs/background-color

class	CSS
bg-*	background-color: *;

 

# border-color

  - https://tailwindcss.com/docs/border-color

class	CSS
border-*	border-color: *;

 

# 자식 요소 사이의 border-color

  - https://tailwindcss.com/docs/divide-color

class	CSS
divide-*	border-color: *;

 

# outline-color

  - https://tailwindcss.com/docs/outline-color

class	CSS
outline-*	outline-color: *;

 

 

---

폰트

# font-family

  - https://tailwindcss.com/docs/font-family

class	CSS
font-{폰트명}	font-family: ...;

 

# font-size

  - https://tailwindcss.com/docs/font-size

class	CSS
text-xs	font-size: 0.75rem; /* 12px */ line-height: 1rem; /* 16px */
text-sm	font-size: 0.875rem; /* 14px */ line-height: 1.25rem; /* 20px */
text-base	font-size: 1rem; /* 16px */ line-height: 1.5rem; /* 24px */
text-lg	font-size: 1.125rem; /* 18px */ line-height: 1.75rem; /* 28px */
text-xl	font-size: 1.25rem; /* 20px */ line-height: 1.75rem; /* 28px */
text-2xl	font-size: 1.5rem; /* 24px */ line-height: 2rem; /* 32px */
...	...
text-9xl	font-size: 8rem; /* 128px */ line-height: 1;

 

# font-style (기울임 설정)

  - https://tailwindcss.com/docs/font-style

class	CSS
italic	font-style: italic;

 

# font-weight

  - https://tailwindcss.com/docs/font-weight

class	CSS
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-variant-numeric

  - https://tailwindcss.com/docs/font-variant-numeric

class	CSS
ordinal	font-variant-numeric: ordinal;
diagonal-fractions	font-variant-numeric: diagonal-fractions;

 

 

---

텍스트

# 텍스트 제한하기

  - n 줄이 넘어가면 텍스트를 잘라냄

  - https://tailwindcss.com/docs/line-clamp

class	CSS
line-clamp-{최대 줄 수}	overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: {최대 줄 수};

 

line-clamp-3

# line-height

  - https://tailwindcss.com/docs/line-height

class	CSS
leading-3	line-height: 0.75rem; /* 12px */
leading-4	line-height: 1rem; /* 16px */
...	...
leading-10	line-height: 2.5rem; /* 40px */

 

# text-align (수평 정렬)

  - https://tailwindcss.com/docs/text-align

class	CSS
text-left	text-align: left;
text-center	text-align: center;
text-right	text-align: right;

 

# vertical-align (수직 정렬)

  - https://tailwindcss.com/docs/vertical-align

class	CSS
align-top	vertical-align: top;
align-middle	vertical-align: middle;
align-bottom	vertical-align: bottom;

 

# text-decoration-line

  - https://tailwindcss.com/docs/text-decoration

class	CSS
underline	text-decoration-line: underline; (밑줄)
line-through	text-decoration-line: line-through; (취소선)

 

# text-transform

  - 영문 대소문자 변환

  - https://tailwindcss.com/docs/text-transform

class	CSS
normal-case	text-transform: none;
uppercase	text-transform: uppercase;
lowercase	text-transform: lowercase;
capitalize	text-transform: capitalize;

 

 

 

---

목록 (li)

# list-style-image

  - https://tailwindcss.com/docs/list-style-image

class	CSS
list-image-none	list-style-image: none;
list-image-[url('경로')]	list-style-image: url('경로');

<ul class="list-image-[url(checkmark.png)] ...">
  <li>5 cups chopped Porcini mushrooms</li>
  ...
</ul>

 

 

---

테두리

# border-radius

  - https://tailwindcss.com/docs/border-radius

class	CSS
rounded-none	border-radius: 0px
rounded-sm	border-radius: 0.125rem;
rounded	border-radius: 0.25rem;
rounded-md	border-radius: 0.375rem;
rounded-lg	border-radius: 0.5rem;
rounded-xl	border-radius: 0.75rem;
rounded-2xl	border-radius: 1rem;
rounded-3xl	border-radius: 1.5rem;

 

# border-width

  - https://tailwindcss.com/docs/border-width

class	CSS
border	border-width: 1px;
border-*    (0, 2~8)	border-width: *px;
border-x-*	border-left-width: *px; border-right-width: *px;
border-y-*	border-top-width: *px; border-bottom-width: *px;
border-t-*	border-top-width: *px;
border-r-*	border-right-width: *px;
border-b-*	border-bottom-width: *px;
border-l-*	border-left-width: *px;

 

 

---

자식 요소 사이의 테두리

# border-width

  - https://tailwindcss.com/docs/divide-width

class	CSS
divide-x	border-right-width: 0px; border-left-width: 1px;
divide-x-*	border-right-width: 0px; border-left-width: *px;
divide-y	border-top-width: 1px; border-bottom-width: 0px;
divide-y-*	border-top-width: *px; border-bottom-width: 0px;

 

# border-style

  - https://tailwindcss.com/docs/divide-style

class	CSS
divide-solid	border-style: solid;
divide-dashed	border-style: dashed;
divide-none	border-style: none;

 

 

---

기타

# cursor

  - https://tailwindcss.com/docs/cursor

class	CSS
cursor-pointer	cursor: pointer;

 

# opacity (불투명도)

  - https://tailwindcss.com/docs/opacity

class	CSS
opacity-0	opacity: 0;
opacity-5	opacity: 0.05;
...	...
opacity-100	opacity: 1;

 

# background-image

  - https://tailwindcss.com/docs/background-image