[Tailwind CSS] px 값 부여하기 & 반응형 레이아웃 만들기

px값 부여하는법

tailwind CSS 의 장점 중 하나는 이미 설정되어 있는 값을 손쉽게 쓸 수 있다는 점이다. 

tailwind CSS 공식문서

이미지처럼 width에 값들이 설정되어 있기 때문에 width-72, width-sreen 등으로 편하게 너비를 설정할 수 있다. 하지만 테일윈드 CSS 속성값에 없는 사이즈를 주고 싶다면? 나는 384px보다 더 큰 600px를 주고 싶다면 어떻게 해야 할까?

 

<div className="w-[500px]"></div>

[대괄호] 안에 원하는 픽셀 값을 넣으면 된다. 그러면 이렇게 원하는 값으로 width를 설정할 수 있다.

개발자 도구 캡쳐

하나만 하면 재미 없으니깐 이번엔 반응형 레이아웃도 알아보자!

 

반응형 레이아웃

tailwind CSS 공식문서

공식문서를 보면 sm, md, lg, xl, 2xl 로 최대 너비를 설정할 수 있다. 

<div className = "lg:w-[600px] md:w-[500px] sm:w-96"></div>

이렇게 해서는 안된다. 이 코드의 결과물은 다음과 같다.

실패한 반응형 레이아웃

w-96이 적용되는 건 max-width 가 640일 때까지이므로, width가 639가 되면 w-96가 적용이 되지 않는다. 

그래서 다음과 같이 수정해야 의도한 대로 작동한다.

<div className = "lg:w-[600px] md:w-[500px] w-96"></div>

별 거 아니지만 생각 없이 코드를 짜다보면 놓칠 수 있는 부분이니 참고하자!