Tailwind CSS

Tailwind CSS (opens in a new tab)는 Next.js와 매우 잘 어울리는 유틸리티 우선 CSS 프레임워크입니다.

Installing Tailwind

Tailwind CSS 패키지를 설치하고 init 명령어를 실행하여 tailwind.config.js 및 postcss.config.js 파일을 생성합니다:

Terminal

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configuring Tailwind

tailwind.config.js 파일 내에 Tailwind CSS 클래스 이름을 사용할 파일의 경로를 추가합니다:

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}', // `app` 디렉토리 추가에 주의하세요.
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
 
    // 또는 `src` 디렉토리를 사용하는 경우:
    './src/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js를 수정할 필요는 없습니다.

Importing Styles

Tailwind가 생성한 스타일을 주입하는 Tailwind CSS 지시문 (opens in a new tab)을 애플리케이션의 Global Stylesheet에 추가합니다. 예를 들어:

app/globals.css

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

루트 레이아웃 (app/layout.tsx) 내에서 globals.css 스타일 시트를 임포트하여 애플리케이션의 모든 경로에 스타일을 적용합니다.

app/layout.tsx

import type { Metadata } from 'next'
 
// 이 스타일은 애플리케이션의 모든 경로에 적용됩니다.
import './globals.css'
 
export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

app/layout.js

// 이 스타일은 애플리케이션의 모든 경로에 적용됩니다.
import './globals.css'
 
export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Using Classes

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

app/page.tsx

export default function Page() {
  return <h1 className="text-3xl font-bold underline">Hello, Next.js!</h1>
}

app/page.js

export default function Page() {
  return <h1 className="text-3xl font-bold underline">Hello, Next.js!</h1>
}

Usage with Turbopack

Next.js 13.1부터 Tailwind CSS 및 PostCSS가 Turbopack (opens in a new tab)을 지원합니다.

Stylesheets Sass