TailwindCSS syntax 정리

레이아웃

sm : @media (min-width:640px) 휴대폰 세로 사이즈

md : @media (min-width:768px) 휴대폰 가로 사이즈

lg : @media (min-width:1024px) 템플릿 사이즈

xl : @media (min-width:1280px) 데스크탑 사이즈

 

flex : 요소를 붙인다. 가로

container mx-auto : x축에 따라 여백이 자동으로 변경된다.

object-cover : 컨테이너를 덮도록 요소의 컨텐츠 조정(이미지가 늘어나거나 찌그러지지 않게 컨테이너 사이즈에 맞춰서 잘림)

lg:w-1/2 : 화면비율50%

overflow-hidden : 컨테이너에 비해 너무 큰 컨텐츠이면 숨겨라

 

float : 블록 레이아웃.

 

사이즈

h : 높이값 h0 ~ h64

w : 너비값 w0 ~ w64, w-full 너비를 전체로 채운다.

 

디스플레이

inline-block : 브라우저 너비를 채우고 알맞게 줄바꿈되게 해준다.

inline-flex : 인라인 플렉스 컨테이너를 만드는데 사용

 

플렉스 박스

items-end : 항목을 아래로 정렬

items-start : 항목을 위로 정렬

items-stretch : 항목을 늘리는데 사용

items-center : 항목을 가운데 배치

 

여백

px-6 :  px(가로축 패딩)-1.5rem

py-6 : py(세로축 패딩)-1.5rem

pt-6 : pt(상단축 패딩)-1.5rem

pb-6 : pd(아래축 패딩)-1.5rem

pr-6 : pr(오른쪽 패딩)-1.5rem

pl-6 : pr(왼쪽 패딩)-1.5rem

 

mx-6 : mx(가로축 마진)-1.5rem

my-6 : my(세로축 마진)-1.5rem

mt-6 : mt(상단축 마진)-1.5rem

mb-6 : mb(아래축 마진)-1.5rem

mr-6 : mr(오른쪽 마진)-1.5rem

ml-6 : ml(왼쪽 마진)-1.5rem

 

테두리

rounded-sm : rounded-sm(라운드 작게), lg(크게)

 

색상 

bg-gray-100 : bg(백그라운드)-gray(색상)-100(농도)

 

타이포그래피

text-xl : 글꼴-크기

text-gray-900 : 글꼴-색상-농도

font- : 폰트명()

leading-none : 글자 세로 간격 없음

leading-loose : 글자 세로 간격 가장 넓게

leading-tight : 글자 세로 간격 타이트하게

uppercase : 대문자표기로 변경해준다.

tracking-wider : 글씨 간격을 보기 좋게 자동으로 해준다.

 

앰팩트

shadow-2xl : 요소의 그림자 크게

hover:gb-indigo-400 : 마우스 오버하면 배경색상-농도400

focus:outline-none focus:shadow-outline : 마우스 오버하면 아웃라인에 그림자

 

기타

hidden lg:block : 브라우저가 lg이상 일때만 보이게

sm:bg-green-500 md:bg-red-500 lg:bg-yellow-500 xl:bg-pink-500

브라우저가 sm 크기일 때:배경-녹색-500농도

브라우저가 md 크기일 때:배경-적색-500농도

브라우저가 lg 크기일 때:배경-노란색-500농도

브라우저가 xl 크기일 때 :배경-핑크색-500농도