[Next.js] 프로젝트에 tailwindCSS가 안 먹히는 문제가 발생하다 .. 😢

개요

현재 진행 중인 개인 기술 블로그 제작 프로젝트를 진행하면서
Next.js + Typescript와 tailwindCSS를 사용하게 되었는데,
tailwindCSS가 먹히지 않는 문제가 발생했다.
 
이 문제가 해결되길 바라는 마음으로,
또 나랑 똑같은 문제를 겪게될 사람들을 위해 글로 남겨본다.
 

문제의 발견

어쩌다 이 문제에 대해 발견하게 되었냐면,
Header와 Footer 컴포넌트 제작 후 레이아웃에 적용을 시켰을 때
아무런 변화가 나타나지 않고 그저 이미지만 나타나는 것을 보고 알게 되었다.
 

... 내 CSS

정말 ... 놀랍게도 컴포넌트를 만들면서 아무런 의심을 못했다.
왜냐하면 전체 레이아웃을 책임질 Theme의 구조를 뒤늦게 잡았기 때문에
이 구조가 잡히면 해결 될 거라고 생각했기 때문이었다.
 
하지만, 구조를 잡았음에도 불구하고 CSS는 먹히지 않았다.
아이콘이나, 글자는 잘 출력되는 것으로 보아 렌더링의 문제는 아닌 듯했다.
 
그리고 아이러니하게도, 처음에 만들어두었던 라이트/다크 모드는 정상적으로 동작한다.
 

 
 
이런 황당한 일을 정말 나만 겪은게 아니였나보다.
구글링을 통해 여러 글을 살펴 보면서 여러가지 방법을 시도했다.
 

문제 해결을 위해 시도한 방법

CSS 파일 위치의 문제

원래는, layouts폴더에 globals.css를 옮겼었다.
UI관련 파일을 모아두고 싶어서 그랬었는데, 공식 문서에 따르면 
12버전 기준 _app.js와 같은 뎁스에 globals.css파일이 있어야한다고 한다.

 
하지만, 해당 방법은 통하지 않았다.
아까 맨 처음 보여준 화면 그대로 나타나는 것을 확인할 수 있었다.
 

Config 경로의 문제

config의 경로를 확인해보니 아래와 같이 되어있었습니다.

const config = {
  darkMode: ['class'],
  content: ['./src/**/*.{ts,tsx}'],
  ...
 };

 
아까 위에 사진을 보시면 알다시피 경로가 다릅니다.
src폴더를 사용하지 않았거든요.

여기서 알았는데, 아마 다른 CSS를 적용하면서 문제가 생긴것 같습니다.

 
그래서 위와 같이 경로를 수정해주었는데,
여전히 문제가 남아있었다.

PostCSS 속 코드 제거하기

이 문제가 며칠간 해결되지 않아서,

스터디를 같이 하시는 분들께 이야기를 해드렸다.

 

시도해본 방법과 레포를 보시고는 문제를 발견해주셨다.

바로, postcss의 문제였다.

 

실수로 다른 코드를 참고하면서 이렇게 만들게 되었는데,

지금 보니 경로 설정도 엉망이었다.

/* @type {import('postcss-load-config').Config} */;

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

    // Or if using src directory:
    './src//.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

export default config;

 

그래서 다 빼버리고, 이렇게만 남겨주었다.

/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    tailwindcss: {},
  },
};

export default config;

 

그랬더니 아래와 같은 화면이 나타났다.

 

아마 추측하건데, 경로의 문제가 아니였을까 싶다.

위 아래 차이첨은 경로 뿐이기 때문에 이렇게 생각하긴하지만,

정확한 원인은 파악할 수 없었다.

 

혹시, 조금 더 정확한 원인을 알고 계시다면, 댓글 부탁드립니다.

참고글

https://cometruedream.tistory.com/245