css

자주 사용하는 tailwind css class cheat sheet

냠냠맨 2023. 4. 24. 15:14

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

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 블러 조절

반응형