Tailwind CSS

Examples

With Tailwind CSS (opens in a new tab)

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에 추가합니다. 예를 들어:

styles/globals.css

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

커스텀 app 파일 (pages/_app.js) 내에서 globals.css 스타일 시트를 임포트하여 애플리케이션의 모든 경로에 스타일을 적용합니다.

pages/_app.tsx

// 이 스타일은 애플리케이션의 모든 경로에 적용됩니다.
import '@/styles/globals.css'
import type { AppProps } from 'next/app'
 
export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

pages/_app.js

// 이 스타일은 애플리케이션의 모든 경로에 적용됩니다.
import '@/styles/globals.css'
 
export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

Using Classes

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

pages/index.tsx

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

pages/index.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)을 지원합니다.

CSS Modules CSS in JS