Tailwind 설정

Tailwind 설정과 전역 CSS

Tailwind는 패키지를 설치하는 것만으로 끝나지 않습니다. content가 JSX/TSX 파일을 스캔하고, globals.css의 지시어가 Root Layout에 import되어야 실제 유틸리티 CSS가 생성됩니다.

1

프로젝트와 패키지

npx create-next-app@latest npm install -D tailwindcss postcss autoprefixer

새 프로젝트라면 생성 질문에서 Tailwind를 선택하고, 기존 프로젝트는 필요한 개발 의존성을 직접 추가합니다.

2

설정 파일 생성

npx tailwindcss init -p tailwind.config.js postcss.config.js

Tailwind 설정과 PostCSS 설정이 함께 만들어집니다. 이후 content 경로가 실제 파일 구조와 맞는지 확인합니다.

3

전역 CSS 연결

@tailwind base; @tailwind components; @tailwind utilities; import './globals.css';

지시어가 들어간 전역 CSS를 layout.tsx에서 가져와야 앱 전체에서 유틸리티 클래스가 적용됩니다.

파일 연결 관계

content ./app/**/*.{js,ts,jsx,tsx,mdx} 같은 경로가 사용한 클래스 이름을 찾습니다.
globals.css Tailwind의 base, components, utilities 레이어가 실제 CSS로 펼쳐질 진입점을 지정합니다.
layout.tsx 전역 CSS import가 빠지면 JSX에 클래스가 있어도 스타일이 보이지 않습니다.

핵심 연결은 content 스캔 → @tailwind 지시어 → Root Layout import 순서입니다. 이 세 지점이 맞아야 JSX의 유틸리티 클래스가 실제 CSS로 생성됩니다.