[React] TailwindCSS 반응형이 안먹힌다 ?

나는 지금 동아리 홍보 차 간단한 테스트를 통한 이벤트성 웹앱을 만들고 있다.

기능 상으로 구현이 마무리되었고, 3월에 있을 교내 동아리 박람회 이전에 태블릿 사이즈로 홍보를 진행하고자 반응형 작업이 필요하게 되었다.

 

디자이너 팀에게 768px 사이즈로 반응형 디자인을 요청드렸고, 반응형 디자인이 마무리된지는 꽤 지났지만 개인적인 일정으로 이제야 반응형 작업을 시작하게 되었다.

 

---

 

먼저, TailwindCSS에서 반응형 다자인은 아래와 같이 기본적으로 제공된다.

   중단점      최소 넓이   CSS

중단점	최소 넓이	CSS
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) { ... }

 

 

div className="m-2 text-[1em] text-center text-[#212224] sm:text-[2em] md:text-[4em]">
    적성 고민 중인 당신을 위한
</div>

 

예를 들어 코드를 이렇게 작성한다면, 기본적으로 1em의 텍스트 사이즈를 가지지만 640px 이상(sm)이면 2em의 사이즈를, 768px 이상(md)이면 4em의 사이즈를 갖도록 설정한 것이다.

 

 

나는 위처럼 설정하고 테스트를 해 보았다.

 

에 분명 730px인데 왜 사이즈가 1em일까 ?

왜 반응형이 적용되지 않는거지 ?

 

우선 기본적으로 해결할 수 있는 방법은 아래와 같다.

 

---

Tailwind가 제대로 설정되지 않았을 가능성 (Tailwind 설정 확인)

tailwind.config.js 코드를 확인한다.

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}", // 사용 중인 파일 확장자 확인
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

 

 

해당 파일이 위 코드와 다르다면 저렇게 바꿔보는 것도 방법이다.

 

---

하지만 나는 저 방법으로 해결되지 않았다.

만약 혼자 개인 프로젝트가 아닌 협업을 하고 있다면, 이 방법을 확인해볼 필요가 있다.

 

커스텀 반응형을 사용하는 경우

TailwindCSS에서는 파일로 본인이 원하는 breakpoint를 설정할 수 있다.

아래처럼 말이다.

export default {
	content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
	theme: {
		fontFamily: {
			NeoDunggeunmoPro: ['NeoDunggeunmoPro', 'sans-serif', '"PF스타더스트"'],
		},
		screens: {
			small: { min: '320px', max: '479px' },
			medium: { min: '480px', max: '767px' },
			tablet: { min: '768px', max: '1023px' },
			laptop: { min: '1024px' },
		},
		extend: {},
	},
	plugins: [],
};

 

TailwindCSS에서는 커스텀 반응형을 추가하면, 기존 반응형 설정은 삭제된다.

따라서 내가 기본 TailwindCSS 반응형 시스템을 사용할 수 없었던 것이다.

 

이럴때는 커스텀 반응형 시스템을 이용하거나, 커스텀 반응형 시스템을 삭제하고 TailwindCSS 기본 반응형 키워드를 사용하면 해결된다.

 

아 된다 ㅎㅎ