테일윈드 css 반응형 제작, 분기설정 하기

두번째 외주의 반응형 페이지를 위해 테일윈드 css 반응형 적용하는 방법을 알아보았다.

우선 테일윈드 css 에서는 기본값으로 breackpoint를 제공한다.

sm	640px	@media (min-width: 640px) { ... }
md	768px	@media (min-width: 768px) { ... }
lg	1024px	@media (min-width: 1024px) { ... }
xl	1280px	@media (min-width: 1280px) { ... }
2xl	1536px	@media (min-width: 1536px) { ... }

// 적용 예
<img class="w-16 md:w-32 lg:w-48" src="...">

또한 직접 breakpoint를 설정할 수도 있는데 이는 tailwind.config.js 파일에서 설정할 수 있다.

// tailwind.config.js

module.exports = {
  theme: {
    screens: {
      sm: { min: "390px", max: "819px" },
      md: { min: "820px", max: "1023px" },
      lg: { min: "1080px" },
    },
  }
}

개인적으로 단순히 브레이크 포인트를 클래스에 작성하고 옵션값을 넣으면 바로 적용되는것이 정말 편리했다.

이번 프로젝트에서는 lg 즉 1024px 에 대한 분기만 설정하면 되는 프로젝트이기 때문에 분기는 하나만 설정하면 되겠다.