Tailwind CSS

Tailwind CSS는 Next.js와 매우 잘 어울리는 유틸리티-퍼스트 CSS 프레임워크입니다.

Tailwind 설치

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

Terminal

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

Tailwind 설정

Tailwind 설정 파일 내부에 Tailwind 클래스 이름을 사용할 파일의 경로를 추가하세요:

tailwind.config.ts

import type { Config } from "tailwindcss";
 
const config: Config = {
  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: [],
};
export default config;

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를 수정할 필요는 없습니다.

스타일 가져오기

Tailwind CSS 지시문을 애플리케이션의 전역 스타일시트에 추가하여 Tailwind가 생성한 스타일을 주입합니다. 예를 들어:

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>
  );
}

클래스 사용

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>;
}

Turbopack과 함께 사용하기

Next.js 13.1부터 Tailwind CSS와 PostCSS는 Turbopack을 지원합니다.

CSS Sass