공개 노트 검색

Next.js 완전정복: 웹 개발자를 위한 가이드

5. Next.js에서 스타일링: CSS 모듈 및 TailwindCSS

Styling in Next.js: CSS Modules and TailwindCSS

Introduction

Next.js는 현대적인 웹 애플리케이션을 개발할 수 있는 막강한 개발 프레임워크입니다. 이 장에서는 Next.js에서 스타일링을 위한 두 가지 인기 방법인 CSS Modules와 TailwindCSS에 대해 알아보도록 하겠습니다. CSS Modules는 컴포넌트별 스타일을 간편하게 관리할 수 있는 대비책이며, TailwindCSS는 클래스 기반의 유틸리티 스타일링 프레임워크로 폭넓은 활용성을 제공합니다.

CSS Modules: A Localized Approach to Styling

CSS Modules는 Next.js에서 기본적으로 지원하는 스타일링 방법입니다. 이를 활용하면 스타일을 로컬 스코프로 제한할 수 있어 클래스 이름 충돌을 예방할 수 있습니다.

기본 사용법

CSS 파일을 생성합니다. 예를 들어 Button.module.css:

.button {
  background-color: #0070f3;
  color: white;
  padding: 10px;
  border-radius: 5px;
}

컴포넌트에서 해당 스타일을 가져옵니다:

import styles from './Button.module.css';

function Button() {
  return <button className={styles.button}>Click me</button>;
}
export default Button;

이 방법을 사용하면 클래스 이름이 고유화되어 다른 CSS 정의와 충돌하지 않습니다. 예제에서 보듯이 styles.button을 통해 스타일을 쉽게 가져올 수 있습니다.

TailwindCSS: Utility-First CSS Framework

TailwindCSS는 유틸리티 기반 CSS 프레임워크로 Next.js에서 쉽게 통합할 수 있습니다. 클래스 이름을 통해 직접 스타일을 적용하며, 빠르고 효율적인 스타일링 솔루션을 제공합니다.

설정 방법

TailwindCSS를 설치합니다:

npm install tailwindcss postcss autoprefixer
npx tailwindcss init

Tailwind 설정 파일을 수정합니다:

tailwind.config.js:

module.exports = {
  content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

globals.css 파일에 Tailwind를 포함합니다:

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

사용 예

function Card() {
  return (
    <div className="bg-gray-200 p-4 rounded-lg">
      <h2 className="text-xl font-bold">Card Title</h2>
      <p className="text-gray-600">This is a card description.</p>
    </div>
  );
}
export default Card;

TailwindCSS는 개발 속도를 현저히 증가시키며 스타일 정의와 관리의 복잡성을 줄여줍니다.

Conclusion

Next.js는 다양한 스타일링 옵션을 지원하며, CSS Modules와 TailwindCSS는 두가지 대표적인 선택입니다. CSS Modules는 컴포넌트 기반으로 스타일 정의를 체계적으로 관리할 수 있으며, TailwindCSS는 가볍고 빠른 스타일링 솔루션입니다. 여러분의 프로젝트 요구에 따라 적합한 방법을 선택하세요.