가이드: Tailwind CSS v3 | Next.js

Source URL: https://nextjs.org/docs/app/guides/tailwind-v3-css

앱 라우터 가이드Tailwind CSS v3

Next.js 애플리케이션에 Tailwind CSS v3를 설치하는 방법

마지막 업데이트 2026년 2월 20일

이 가이드는 Next.js 애플리케이션에 Tailwind CSS v3를 설치하는 방법을 단계별로 설명합니다.

참고: 최신 Tailwind 4 설정은 Tailwind CSS 설정 안내서를 참고하세요.

Tailwind v3 설치

Tailwind CSS와 해당 피어 의존성을 설치한 뒤, init 명령을 실행하여 tailwind.config.js와 postcss.config.js 파일을 생성합니다:

pnpmnpmyarnbun

터미널

    pnpm add -D tailwindcss@^3 postcss autoprefixer
    npx tailwindcss init -p

Tailwind v3 구성

tailwind.config.js 파일에서 템플릿 경로를 설정합니다:

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.css

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

루트 레이아웃에서 해당 CSS 파일을 가져옵니다:

app/layout.tsx

JavaScriptTypeScript

    import './globals.css'

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

클래스 사용하기

Tailwind CSS를 설치하고 글로벌 스타일을 추가한 후에는 애플리케이션에서 Tailwind 유틸리티 클래스를 사용할 수 있습니다.

app/page.tsx

JavaScriptTypeScript

    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에서 지원됩니다.

보내기