자주 쓰는 Tailwind CSS

border 세팅

border radius - 모서리 둥글게

• rounded-문자(Tailwind에 지정된 이름)
ex) rounded-md, rounded-Ig, rounded-full

• rounded-[단위]
ex) rounded-[50px]

• rounded-방향-문자 rounded-방향-[단위]
ex) rounded-t-Ig, rounded-b-lg, rounded-r-g ex) rounded-t-[50px]

border width - 테두리 두께

• border-숫자(Tailwind에 지정된 숫자)
ex) border-0, border, border-2, border -8

• border-[단위] border-방향 -숫자
ex) border-[5px]
ex) border -x2, border-4-4, border-x-13px]

border-style - 테두리 모양

• border-solid : 실선 테두리

• border-dashed : 대쉬 테두리

• border-dotted : 점선 테두리

• border-double : 이중선 테두리

• border-none : 테두리 없음

border-color - 테두리 색상

• border-색상-채도(Tailwind에 지정된 숫자)
ex) border-blue-500, border-sky-900
ex) border-transparent : 투명, border-black : 검정색, border-White : 흰색

• border-[색상 값 or 색상 이름]
ex) border-[#50d71e]
ex) border-[crimson]

Colums - 자동 컬럼

colums-1에서 colums-12까지 설정 가능

• columns-8
  

• columns-6