CSS | Notion

Next.js는 애플리케이션에 CSS를 사용하여 스타일을 지정하는 여러 가지 방법을 제공하며, 다음 방법들을 제공한다.

Tailwind CSS
CSS Modules
Global CSS (전역 CSS)
External Stylesheets (외부 스타일시트)
Sass
CSS-in-JS

1. Tailwind CSS

Tailwind CSS는 커스텀 디자인을 구축하기 위한 저수준(low-level) 유틸리티 클래스를 제공하는 유틸리티 우선 CSS 프레임워크다.

Tailwind CSS 설치하기

npm install -D tailwindcss @tailwindcss/postcss

PostCSS 플러그인을 postcss.config.mjs 파일에 추가하자.

postcss.config.mjs

export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

전역 CSS 파일에 Tailwind를 가져와야 한다.

app/globals.css
```
@import 'tailwindcss';
```

루트 레이아웃에서 CSS 파일을 가져오자.

app/layout.tsx

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

이제 애플리케이션에서 Tailwind의 유틸리티 클래스를 사용할 수 있다.

app/page.tsx

export default function Page() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <h1 className="text-4xl font-bold">Welcome to Next.js!</h1>
    </main>
  )
}

매우 오래된 브라우저에 대한 더 광범위한 브라우저 지원이 필요한 경우, Tailwind CSS v3 setup instructions을 참조하자.