이번 가이드에서는 여러분의 Next.js 애플리케이션에 Tailwind CSS v3를 설치하는 방법을 처음부터 끝까지 차근차근 알려드릴게요.
💡 알아두면 좋아요: 최신 버전인 Tailwind 4 설정 방법이 궁금하시다면, Tailwind CSS 설정 안내를 참고해 주세요.
👨🏫 강사의 꿀팁 & 부연 설명:
"어? 최신 버전인 v4가 나왔는데 왜 v3 가이드를 봐야 하죠?" 라고 생각하실 수 있어요. 아주 좋은 질문입니다! 현재 수많은 기업들의 기존 프로젝트(레거시)가 여전히 v3로 작성되어 있고, 특정 서드파티 플러그인들은 아직 v4와 호환되지 않는 경우가 많아요. 그래서 v3의 세팅 방법과 구조를 정확히 이해하고 있는 것은 현업 개발자로서 아주 강력한 무기가 된답니다!
Tailwind v3 설치하기
가장 먼저 해야 할 일은 Tailwind CSS와 단짝 친구들(피어 디펜던시, peer dependencies)을 설치하는 거예요. 설치가 끝났다면 init 명령어를 실행해서 설정 파일인 tailwind.config.js와 postcss.config.js 파일 두 개를 모두 만들어 줍니다.
👨🏫 강사의 꿀팁 & 부연 설명:
여기서postcss는 자바스크립트를 이용해 CSS를 변환해 주는 똑똑한 도구이고,autoprefixer는 브라우저(크롬, 사파리 등)마다 조금씩 다른 CSS 접두사(vendor prefix)를 자동으로 붙여주는 아주 고마운 패키지랍니다. 이 세 가지는 보통 항상 세트로 다닌다고 생각하시면 편해요!
pnpm add -D tailwindcss@^3 postcss autoprefixer
npx tailwindcss init -pnpm install -D tailwindcss@^3 postcss autoprefixer
npx tailwindcss init -pyarn add -D tailwindcss@^3 postcss autoprefixer
npx tailwindcss init -pbun add -D tailwindcss@^3 postcss autoprefixer
bunx tailwindcss init -pTailwind v3 설정하기
이제 만들어진 tailwind.config.js 파일을 열어서, 템플릿 경로를 설정해 볼까요?
👨🏫 강사의 꿀팁 & 부연 설명:
content배열 안에 경로를 적어주는 건 정말, 너무너무 중요해요! Tailwind는 이 배열에 적힌 경로의 파일들을 싹 훑어보고 "아, 이 클래스가 코드에 쓰였네?" 하고 필요한 CSS만 딱 골라서 가볍게 만들어내거든요.
만약 여러분이 새 폴더를 만들어서 컴포넌트를 작성했는데 스타일이 안 먹힌다? 십중팔구 여기content에 경로를 추가 안 해서 그런 거랍니다. 초보자분들이 제일 많이 하는 실수니까 꼭 기억해 두세요!
//filename="tailwind.config.js"
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./app/**/*.{js,ts,jsx,tsx,mdx}',
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {},
},
plugins: [],
}그 다음에는 여러분의 글로벌 CSS 파일에 Tailwind의 디렉티브(directives, 지시어)들을 추가해 줍니다.
👨🏫 강사의 부연 설명:
아래의 세 줄이 Tailwind의 마법을 부리는 핵심이에요.
@tailwind base;는 브라우저들의 기본 스타일을 동일하게 싹 초기화해주고,
@tailwind components;는 Tailwind의 컴포넌트 클래스들을,
@tailwind utilities;는 우리가 앞으로 밥 먹듯이 쓸 유틸리티 클래스(ex:text-center,mt-4등)를 사용할 수 있게 불러오는 역할을 합니다.
@tailwind base;
@tailwind components;
@tailwind utilities;마지막으로, 애플리케이션의 뼈대가 되는 루트 레이아웃(root layout) 파일에서 방금 작성한 CSS 파일을 임포트(import)해 주면 됩니다.
//filename="app/layout.tsx" switcher
import './globals.css'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}//filename="app/layout.js" switcher
import './globals.css'
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}클래스 사용하기
짜잔! Tailwind CSS 설치와 글로벌 스타일 설정까지 모두 끝났어요. 이제 애플리케이션 어디에서든 Tailwind의 유틸리티 클래스들을 마음껏 사용하실 수 있습니다.
👨🏫 강사의 꿀팁 & 부연 설명:
수많은 유틸리티 클래스 이름들을 처음부터 다 외우려고 스트레스 받지 마세요! VSCode 에디터를 사용하신다면 'Tailwind CSS IntelliSense' 라는 공식 확장 프로그램을 꼭 설치하시길 강력히 추천합니다.
text-까지만 입력해도 어떤 색상과 크기가 있는지 자동완성으로 다 보여주고, 클래스명에 마우스를 올리면 실제 어떤 CSS 코드로 변환되는지도 미리 볼 수 있어서 개발 속도와 학습 속도가 엄청나게 빨라집니다.
//filename="app/page.tsx" switcher
export default function Page() {
return <h1 className="text-3xl font-bold underline">Hello, Next.js!</h1>
}//filename="app/page.js" switcher
export default function Page() {
return <h1 className="text-3xl font-bold underline">Hello, Next.js!</h1>
}Turbopack과 함께 사용하기
Next.js 13.1 버전부터는 Tailwind CSS와 PostCSS가 Turbopack 환경에서도 완벽하게 지원된답니다.
👨🏫 강사의 부연 설명:
Turbopack(터보팩)이 뭐냐고요? 기존에 쓰던 Webpack을 대체하기 위해 Next.js 팀에서 'Rust'라는 언어로 만든 아주아주 빠른 차세대 번들러예요. 코드를 수정하고 저장했을 때 화면에 반영되는 속도(HMR)가 기존보다 훨씬 빠르기 때문에, 나중에 규모가 큰 프로젝트를 하실 때 그 진가를 톡톡히 느끼실 수 있을 거예요.
모든 문서의 의미론적 개요(sitemap)를 보시려면 /docs/sitemap.md 문서를 참고해 주세요.
사용 가능한 모든 문서의 전체 인덱스를 보시려면 /docs/llms.txt 문서를 확인해 주세요.
