Tailwind 반응형을 사용하며 느낀 차이

그동안 웹 반응형을 구현할 때는 MUI(Material UI)의 useTheme, useMediaQuery를 사용했었다.
평소 Tailwind를 사용해보고 싶다는 생각은 있었지만 기회가 없었다. 그러다 이전 업무와 최근 진행 중인 개인 프로젝트에서 Tailwind를 사용하게 되었고, 반응형을 구현하면서 기존에 사용하던 방식과는 접근 방식에 차이가 있다는 점을 느껴 기록해보려고 한다.

이전에 useTheme, useMediaQuery를 활용해 반응형을 구현했던 내용은 아래 글에 정리해 두었다.
https://siyoonn.tistory.com/164

---

반응형을 구현하며 가장 크게 느낀 차이

기존에는 useMediaQuery를 사용해 화면 크기를 확인한 뒤, 조건문으로 스타일이나 컴포넌트를 분기하는 방식을 사용했다.

fontSize: isMobile ? "20px" : "30px"

 

생각의 흐름은 보통 이랬다.

웹 = 기본
모바일 = 예외 처리

그런데 Tailwind는 모바일 스타일을 먼저 작성하고, 화면이 커질 때만 md:, lg: 등을 추가한다.

// 768px 미만 → text 크기 20px
// 768px 이상 → text 크기 30px
text-[20px] md:text-[30px]

 

생각의 흐름 자체가 달랐다.

모바일 = 기본
웹 = 확장

 

처음에는 이 방식이 낯설었지만, 기준을 이해하고 나니 오히려 반응형 스타일을 더 직관적으로 작성할 수 있었다.

---

Tailwind의 기본 Breakpoint 

Prefix	의미
sm	640px 이상
md	768px 이상
lg	1024px 이상
xl	1280px 이상
2xl	1536px 이상

---

스타일만 변경되는 경우

글씨 크기, 패딩, 정렬, Grid 개수처럼 스타일만 변경되는 경우에는 Tailwind의 반응형 Prefix를 사용하면 된다.

text-[20px] md:text-[30px]

 

구조가 변경되는 경우

모든 반응형을 Tailwind만으로 해결할 수 있는 것은 아니다.

예를 들어 모바일에서는 Drawer를 사용하고 웹에서는 일반 메뉴를 보여주는 것처럼 컴포넌트 구조 자체가 달라지는 경우에는 React 조건문을 사용하는 것이 더 적절했다.

{
  isMobile ? <Drawer /> : <nav />
}