Next.js에서 tailwind가 적용이 안되요.

열심히 tailwind를 작성했는데 common 폴더 안의 파일에 tailwind가 적용이 되지 않아서 이것저것 찾아봤다.

CNA 할 때 분명 tailwind도 설치해 줘서 안될 이유를 더 찾지 못했던 것 같다.

tailwind 설정해주고 tailwind config 파일도 확인했는데 딱히 잘못된 게 없었다

(그런 줄 알았다)

다른 분들이 올리신 글은 나랑 다른 문제인 것 같아 검색을 멈추고 생각해 봤다.

 

tailwind.config.ts 파일을 뜯어보다가 문제가 뭔지 알았다.

tailwind.config.ts는 tailwind 관련 설정을 해주는 파일인데, 여기서 content 영역은 tailwind를 적용할 범위를 나타낸다.

나는 당연히 common 폴더가 src/app/ 하단에 있을 거라고 생각했었는데 알고 보니 src 폴더 바로 아래에 뒀었다.

content 안의 내용을 아래와 같이 수정해 주니까 잘 적용되었다.

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/_components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
    // 이 부분이 없어서 발생했던 문제
    "./src/common/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        background: "var(--background)",
        foreground: "var(--foreground)",
      },
    },
  },
  plugins: [],
};
export default config;

 

common 폴더를 app 하단에 넣는 방법도 있겠지만, common 안에는 전반적인 세팅 파일들도 넣을 예정이라 밖에다 두기로 했다.

다음부터 이런 문제가 발생하면 우선 설정 파일이랑 내 폴더 구조가 일치하는지부터 확인해 봐야겠다.