Tailwind CSS

Tailwind CSS은 Next.js와 뛰어져 잘 작동하는 유틸리티 우선 CSS 프레임워크입니다.

Tailwind 설치

Tailwind CSS 패키지를 설치하고 init 명령을 실행하여 tailwind.config.js와 postcss.config.js 파일을 생성하세요.

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

Tailwind 설정하기

tailwind.config.js 파일 내부에서 Tailwind CSS 클래스 이름을 사용할 파일의 경로를 추가하세요:

/** @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는 예를 들어 애플리케이션의 글로벌 스타일시트에 생성된 스타일을 삽입하기 위해 사용합니다.

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

루트 레이아웃(app/layout.tsx) 안에서 전역.css 스타일시트를 가져와서 애플리케이션의 모든 경로에 스타일을 적용하세요.

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

클래스 사용하기

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

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

Turbopack 사용법