프로젝트에서 반응형 웹사이트 제작 중에 추가적인 breakpoint를 만들고 싶었다.
그래서 공식문서에 있는대로 만들었는데...
이미 다 만들었던 반응형 컴포넌트들이 갑자기 작동을 안한다..!
무슨 일이지?
Tailwind 버전 : 3.1.8
// tailwind.config.js
module.exports = {
purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
darkMode: false, // or 'media' or 'class'
mode: "jit",
theme: {
screens: {
"2sm": "425px",
},
},
};
필자는 프로젝트 도중에 2sm
이라는 breakpoint를 추가로 만들었다.
425px부터 적용이 된다는 뜻이다.
물론, 프로젝트 도중에 설정했으므로,
이 breakpoint가 설정되기 전에는 Tailwind 공식문서에 나와있는 값들
즉, sm, md, lg, xl, 2xl를 사용하고 있었다.
그런데...
저 설정을 하자마자, 기존에 사용했던 breakpoint들이 먹통이 됐다!!!
// tailwind.config.js
module.exports = {
purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
darkMode: false, // or 'media' or 'class'
mode: "jit",
theme: {
screens: {
"2sm": "425px",
sm: "640px",
md: "768px",
lg: "1024px",
xl: "1280px",
"2xl": "1536px",
},
},
};
해결 방법은 간단했다. 혹시나해서 원래 있던 값들을 커스텀 값처럼 다 설정해줬다.
다시 모든 breakpoint에 대해서 잘 작동하기 시작했다.
sm, md, lg, xl에만 따옴표가 없는데
이는 필자가 일부러 한 것은 아니고, 저장하면 쟤들만 자동으로 따옴표가 사라진다.
아무래도 앞에 숫자같은 문자가 붙냐 안 붙냐의 차이같다.
기능에는 전혀 문제가 없다.