Next.js 13에서 tailwindcss가 적용되지 않는 오류 해결

Next.js 13을 사용할 때, tailwindcss를 사용하고 있는데, next.js에서 만들어준 기본 파일 이외에는 tailwindcss가 적용되지 않는 일이 있었다.

코드 구성은 다음과 같고, 아래 파일은 /src/app/test/page.tsx 에 위치시켰다.

import Section from "@/src/component/Section";

export default function Page() {
  return (
    <Section>
      <h1 className="bg-red-100">header</h1>
    </Section>
  );
}

그리고 Section 컴포넌트에서도 tailwindcss를 사용해서 디자인을 구성했는데 실제 컴파일 후 결과화면을 보니 전혀 적용되지 않고, head태그에도 tailwind가 보이지 않고 있었다.

원인을 찾아보니, tailwindcss가 적용되기 위해서는 tailwindcss의 빌드를 설정하는 tailwind.config.js에 새롭게 변경한 파일 구조가 반영되어 있지 않아, tailwindcss가 새로운 파일을 찾을 수 없어서 그런 것이였다.

수정 전의 tailwind.config.ts의 파일 구성은 다음과 같이 되어 있다.

import type { Config } from 'tailwindcss'

const config: Config = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic':
          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
    },
  },
  plugins: [],
}
export default config

나는 Next.js 13의 App Route 기능을 사용하면서, 하위 디렉터리로 test를 만들었는데 tailwindcss 설정파일의  아래 파일 경로가 새로운 경로에 맞지 않게 적용되어 있었다.

  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],

해당 부분을 수정하면 다음과 같이 수정한다.

  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],

원래 next.js 13은 초기 설정 시, 설정 파일과 소스 파일의 분리를 위해 src파일 생성 여부를 물어보고 있었고, 나는 처음에는 src를 사용하지 않고 쓰다가 나중에서야 src를 사용해서 설정 파일과 소스 파일을 분리하고자 했다.

 

문제해결요약

tailwindcss를 사용하다가 적용이 되지 않는다면 tailwind.config.ts에 적용된 content 배열의 파일 경로 목록이 잘못되지 않았는 지 확인한다.