Next.js에 Tailwind CSS 적용하기 (최신 버전 대응 가이드)

1. Tailwind CSS란?

Tailwind CSS는 유틸리티 클래스 기반으로 빠르게 UI를 구성할 수 있는 CSS 프레임워크입니다. 컴포넌트마다 별도 CSS를 작성하지 않고, HTML 클래스만으로 스타일링이 가능합니다.

2. 설치 명령어

npm install -D tailwindcss postcss autoprefixer

설치 후 다음 명령어로 초기화합니다:

npx tailwindcss init -p

3. 초기화 시 에러 발생 (해결 방법)

npx tailwindcss init -p 실행 시 아래와 같은 에러가 발생할 수 있습니다:

npm ERR! could not determine executable to run

이 에러는 Tailwind CSS 실행 CLI가 설치되지 않았을 때 발생합니다.

해결 방법

1. 기존 패키지 제거 및 캐시 정리

rm -rf node_modules package-lock.json
npm uninstall tailwindcss postcss autoprefixer
npm cache clean --force

2. 재설치

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

3. 정상적으로 tailwind.config.js와 postcss.config.js 생성 확인

4. PostCSS 관련 에러 해결

Tailwind v3.4부터는 PostCSS 플러그인이 분리되어 아래와 같은 에러가 발생할 수 있습니다:

Error: You're trying to use `tailwindcss` directly as a PostCSS plugin.

해결 방법

@tailwindcss/postcss를 설치하고 postcss.config.js를 수정해야 합니다.

npm install -D @tailwindcss/postcss

// postcss.config.js
module.exports = {
  plugins: {
    '@tailwindcss/postcss': {},
    autoprefixer: {},
  },
}

5. tailwind.config.js 설정 예시

// tailwind.config.js
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

6. globals.css 설정

/* styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

7. _app.js 설정

Tailwind가 전역에 적용되도록 _app.js에 CSS를 import 합니다.

// pages/_app.js
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp;

8. 테스트 페이지 예제

// pages/tailwind-sample.js
export default function TailwindSample() {
  return (
    <div className="bg-blue-600 text-white p-6 rounded text-center">
      <h1 className="text-2xl font-bold">Tailwind 적용 완료</h1>
      <p>이 페이지는 Tailwind로 스타일링되었습니다.</p>
    </div>
  );
}

접속 경로: /tailwind-sample

9. 결론

Tailwind CSS는 빠르게 UI를 구성할 수 있는 도구이지만, 최신 버전에서는 PostCSS 플러그인 구조가 변경되었기 때문에 설치 시 주의가 필요합니다. 위 과정처럼 설정 파일을 정확히 구성하면 Next.js에서도 손쉽게 사용할 수 있습니다.