next.js에서 tailwind 에러

기존에 학습중이던 넥스트 프로젝트인 퍼즐 맞추기를 하고 있었는데, 퍼블리싱에 작업하는 시간을 줄이기 위해 tailwind를 사용해보려고 했다.

 

https://tailwindcss.com/docs/installation/framework-guides/nextjs

Install Tailwind CSS with Next.js

공식문서에 따라 설치를 진행했다.

npm install tailwindcss @tailwindcss/postcss postcss

tailwind에 있는 postcss를 함께 설치한다.

 

const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};
export default config;

프로젝트 루트에 postcss.config.js를 만들고 위 코드를 작성해준다. 

 

globals.css에 tailwind를 import해주고 사용하면 된다.

 

바로 실패

globals.css에 입력한 tailwind가 인식되지 않는다.

---

원인을 찾아보니 모듈이 제대로 설치되지 않았거나 캐시문제라고 해서 remove로 라이브러리와 캐시를 초기화하고 다시 설치했는데도 인식이 안된다.

지피티에 물어보니  postcss.config.js외에도 tailwind.config.ts도 설치해야 한다며 여러 명령어를 알려줬다.

 

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

해당 명령어를 입력하면 tailwind.config.js와 postcss.config.js가 생성된다는데, 

npm error could not determine executable to run

라는 에러가 뜨며 설치한 tailwind를 인식하지 못한다. 또 실패

---

npm uninstall tailwindcss postcss autoprefixer
npm cache clean --force
Remove-Item -Recurse -Force node_modules
Remove-Item package-lock.json
npm install

다시 tailwind 라이브러리를 삭제하고 캐시와 라이브러리 둘다 초기화 후 재설치했더니 인식은 됐다.

 

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "./app/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

tailwind.config.ts에 해당 코드를 작성해준다.

content는 tailwind를 적용할 경로를 입력해주는건데, 현재 본인이 사용하는 13버전의 넥스트부터는 pages폴더를 사용하지 않고 app폴더 내부에서 라우터 폴더를 만들어 사용하기 때문에 app을 제외한 다른 코드는 굳이 작성할 필요 없다.

 

@tailwind base;
@tailwind components;
@tailwind utilities;

해당 코드를 globals.css에 입력해서 tailwind 코드를 인식하게 해준다.

 

tailwind가 인식되지 않는다며 css 적용이 되질 않는다. 또 실패

---

도저히 원인을 못찾아서 에러 메세지를 토대로 구글링을 했는데 tailwind 제작? 한 깃허브 이슈에 에러가 발생한 사람들의 글을 찾았다.

 

https://github.com/tailwindlabs/tailwindcss/issues/15735

[v4] It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin. · Issue #15735 · tailwindlabs/tailwindcss

 

쭉 찾아보니 next 뿐만 아니라 anguler, Svelte 등의 다른 프레임워크 등에서도 tailwind 설치 시의 에러가 동일하게 발생한다고 한다.

그 중 넥스트를 사용하는 분의 글을 보니 가장 최신의 라이브러리를 설치해주는 기존 명령어 대신 이전 버전을 정확히 명시해주어 명령어를 입력하면 해결된다고 한다.

 

npm install tailwindcss@^3.4.17 postcss@^8.5.0 autoprefixer@^10.4.20

각각의 라이브러리를 버전을 명시하여 입력해주었더니 에러가 해결됐다.

아마 최신 버전이 여러 프레임워크에 연동되지 않아 인식을 못한 것으로 추측된다.

 

그리고 globals.css에 tailwind를 import해 줄 때도

/* @tailwind base;
@tailwind components;
@tailwind utilities; */

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@tailwind 방식은 사용되지 않는다고 @import를 붙여 직접 tailwindcss에서 가져와야 한다.