[트러블슈팅]next.js16과 tailwindcss v4 반응형 웹 오류

next.js16에서 tawilwindcss v4를 사용하였다.

반응형 휍을 만들기 위해

sm, md, lg 등의 처리를 하였다.

하지만, 반응형에 답하지 않았다.

 

잘못된 곳을 계속 찾다가 next.js16과 tailwindcss v4의 호환성 문제라는 글을 봤다.

글을 읽고 나도 v4의 문제라고 판단했다.

 

그래서 v4를 v3로 다운그레이드 하였다.

tailwind.config.js 설정을 다음과 같이 했다.

module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/editor/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    screens: {
      small: { min: '320px', max: '479px' },
      medium: { min: '480px', max: '767px' },
      tablet: { min: '768px', max: '1023px' },
      laptop: { min: '1024px' },
    },
    extend: {},
  },
  plugins: [],
}

 

원래는 screens에 아무 값도 넣지 않았다.

하지만 반응형이 되지 않았다.

그래서 글을 찾다가

screens로 커스텀을 만든 후에 적용이 되었다는 글을 보았다.

그래서, 나도 커스텀 스크린을 만들었다.

그 후, 반응형을 해보니 잘 되었다.

 

v4가 최신 버전이라서 문제가 많다는 소식을 들었다.

next.js16에서는 호환성이 되는 v3를 사요해야겠다.