Tailwind CSS v3#

상위 메뉴: Guides
전체 목차: Next.js 학습 문서

학습 목표#

Tailwind CSS v3와 peer dependency를 설치하고 설정 파일을 생성할 수 있다.
App Router의 파일을 Tailwind 콘텐츠 탐색 범위에 포함할 수 있다.
전역 CSS와 루트 레이아웃을 연결하고 컴포넌트에 유틸리티 클래스를 적용할 수 있다.
Tailwind CSS v3를 선택해야 하는 경우와 Turbopack 지원 범위를 설명할 수 있다.

핵심 개념 및 설명#

이 가이드는 더 넓은 브라우저 호환성을 위해 Next.js 애플리케이션에 Tailwind CSS v3를 설치하는 방법을 다룬다.

알아두면 좋은 점: 최신 Tailwind CSS v4 구성은 CSS 시작 안내의 Tailwind CSS 섹션을 참고한다.

Tailwind v3 설치#

Tailwind CSS와 peer dependency인 PostCSS, Autoprefixer를 개발 의존성으로 설치한다. 이어 init -p를 실행하면 tailwind.config.js와 postcss.config.js가 함께 생성된다.

bash

npm install -D tailwindcss@^3 postcss autoprefixer
npx tailwindcss init -p

pnpm과 Yarn도 설치 뒤 npx tailwindcss init -p를 실행한다. Bun에서는 bun add -D tailwindcss@^3 postcss autoprefixer와 bunx tailwindcss init -p를 사용한다.

Tailwind v3 구성#

tailwind.config.js의 content에는 Tailwind 클래스를 사용하는 템플릿 경로를 지정한다. 공식 예제는 app, pages, components 아래의 JavaScript, TypeScript, JSX, TSX, MDX 파일을 탐색 대상으로 둔다.

tailwind.config.jsjs

// 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의 세 레이어를 추가한다.

app/globals.csscss

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

App Router에서는 이 전역 CSS를 루트 레이아웃에서 import한다.

app/layout.tsxtsx

// app/layout.tsx
import './globals.css'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

클래스 사용#

설치와 전역 스타일 연결을 마치면 컴포넌트의 className에 Tailwind 유틸리티 클래스를 사용할 수 있다.

app/page.tsxtsx

// app/page.tsx
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에서 지원된다. 따라서 이 가이드의 Tailwind v3 구성은 Turbopack을 사용하는 Next.js 개발 환경에서도 사용할 수 있다.

예제 및 데모 설계#

Phase 2에서 text-3xl font-bold underline을 적용한 제목과 적용하지 않은 제목을 나란히 표시한다.
content 경로에 포함된 컴포넌트와 제외된 별도 경로의 컴포넌트를 비교해 클래스 탐색 범위의 영향을 확인한다.
Tailwind v3와 v4 설정 파일 및 CSS 진입점의 차이를 비교하되, 이 챕터의 실행 예제는 v3에 고정한다.
현재 Phase 1에서는 애플리케이션을 만들지 않고 설치 명령, 파일 구성, 확인할 화면만 설계한다.

연습 문제#

Tailwind v3 설정과 PostCSS 설정을 함께 생성하는 명령은 무엇인가?

npx tailwindcss init -p
npx next init tailwind
npm run postcss:init
npx tailwindcss build -p

정답 보기

정답: 1 — init -p가 tailwind.config.js와 postcss.config.js를 생성한다.

App Router에서 Tailwind의 세 지시어가 있는 app/globals.css를 어디서 import하는가?

tailwind.config.js
루트 레이아웃
Route Handler
postcss.config.js

정답 보기

정답: 2 — 전역 CSS는 app/layout.tsx 또는 app/layout.js의 루트 레이아웃에서 import한다.

공식 문서의 설명과 맞는 것을 모두 고르시오.

최신 Tailwind v4 구성은 별도의 CSS 시작 안내에서 확인한다.
Tailwind와 PostCSS는 Next.js 13.1부터 Turbopack에서 지원된다.
content에는 CSS 파일 경로만 넣어야 한다.
Tailwind v3 설치에는 tailwindcss@^3, postcss, autoprefixer가 포함된다.

정답 보기

정답: 1, 2, 4 — content에는 유틸리티 클래스를 사용하는 JS, TS, JSX, TSX, MDX 템플릿 경로를 지정한다.

챕터 요약#

Tailwind CSS v3는 더 넓은 브라우저 호환성이 필요한 경우 선택할 수 있다.
tailwindcss@^3, PostCSS, Autoprefixer를 설치하고 init -p로 두 설정 파일을 생성한다.
content에는 app, pages, components 아래의 템플릿 경로를 지정한다.
Tailwind 지시어를 넣은 전역 CSS는 App Router의 루트 레이아웃에서 import한다.
Next.js 13.1부터 Tailwind CSS와 PostCSS를 Turbopack에서도 사용할 수 있다.