자주 사용하는 tailwind css class cheat sheet

제가 자주 사용하는 속성들을 간단히 정리합니다.

Animation
transition	all	transition 효과
duration	100 , 200 , 300	전환 기간
delay	100 150	전환 지연
rotate	0~6	요소 회전
ease-in-out	ease-in-out	애니메이션 처리
skew	skew-(x or y)-1	요소 기울이기

요소 가운데 정렬
flex	display:flex
justifycenter	justifycontent-center
itemscenter	alignitem-center

자주 사용하는 디자인 속성
rounded	md, lg , xl ,2xl etc	border radius
border	border-(n*2)	border
border	t,r,b,l	top, left, bottom, right
outline
overflow-hidden	요소가 너무 크면 콘텐츠를 자름	overflow:hidden
overflow-scroll	스크롤이 필요한 경우에만 스크롤 표시	overflow:scroll
overflow-x-auto	필요시 가로스크롤 허용
flex 방향	flex-row , flex-col	방향을 설정해줌

요소 안보이게 가려주기
hidden	아예 렌더트리 바깥으로 빠짐	display: none
invisible/visible	요소는 안보이지만 자리는 차지함

마진 패딩 정리
p	p-1, p-2	패딩
m	m-1, m-2	마진
t,r,l,b	top, left, right, bottm	한쪽면만 적용하고자할 때
x , y	x축 / y축	x축 혹은 y축만 적용하고자할때

그라디언트 주기
bg-gradient-to-(방향t,r,l,b) from (색상) to (색상)	bg-gradient-to-r-from-indigo-600 to-pink-500	그라디언트를 배경에 주는 방법

text 관련 속성
text-inherit	color를 상속받겠다는 뜻	color:inherit
text-slate	50, 100, 200	흰글씨
text-gray	100,200	검정글씨
text-center		text-align:center
underline		밑줄긋기
decoration	pink-500(색상)	밑줄색깔지정
text-ellipsis		text-overflow:ellipsis
text 크기조정	text-xs, sm, base, lg ,xl, 2xl ~	텍스트 크기조정
font 굵기 조정	font-medium, semibold, bold etc	굵기를 조절함
opacity	(n*5)	투명도 조절
blur	sm,md,lg,xl	블러 조절