Published on

4단계: 스타일링과 Tailwind CSS 적용

스타일링과 Tailwind CSS 적용

Next.js 프로젝트에서 다양한 스타일링 방법을 적용할 수 있습니다.
전역 CSS, 컴포넌트별 CSS 모듈, 유틸리티 기반 Tailwind CSS까지 실무에 자주 쓰이는 방식을 중심으로 학습합니다.

4-1. 전역 CSS 파일 적용

Next.js는 pages/_app.js에서 전역 스타일을 불러올 수 있습니다.

// pages/_app.js
import '../styles/globals.css'

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

/* styles/globals.css */
body {
  font-family: sans-serif;
  background-color: #f9f9f9;
}

4-2. CSS 모듈 사용법

컴포넌트 전용 스타일을 적용하고 싶다면 .module.css 확장자를 사용하세요.

// components/Button.js
import styles from './Button.module.css'

export default function Button() {
  return <button className={styles.primary}>클릭</button>
}

/* components/Button.module.css */
.primary {
  background-color: royalblue;
  color: white;
}

4-3. Tailwind CSS 통합

Next.js 프로젝트에서 Tailwind를 적용하려면 아래와 같이 설정합니다.

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

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

/* styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

_app.js에서 위 CSS를 불러오면 Tailwind가 적용됩니다.

4-4. Tailwind 클래스 예시

export default function Card() {
  return (
    <div className="p-4 bg-white shadow rounded">
      <h2 className="text-xl font-bold">카드 타이틀</h2>
      <p className="text-gray-600">본문 내용</p>
    </div>
  )
}
  • p-4: padding
  • bg-white, text-xl, rounded: 시각적 속성 유틸리티 클래스

4-5. 스타일 전략 선택 가이드

방식특징추천 상황
전역 CSS모든 페이지에 공통 적용전체 테마, 리셋 스타일
CSS Module파일별 scope 스타일 적용재사용 컴포넌트
Tailwind CSS클래스 기반 빠른 스타일링빠른 UI 프로토타입
styled-componentsJS 안에서 CSS 정의복잡한 테마 커스터마이징 필요 시

요약

  • 전역 CSS는 _app.js에서 불러오며 프로젝트 전체에 영향을 줍니다.
  • CSS 모듈은 컴포넌트 단위로 관리되는 안전한 스타일링 방법입니다.
  • Tailwind CSS는 유틸리티 기반으로 빠른 스타일 작성이 가능하며 생산성이 뛰어납니다.
  • 상황에 따라 적절한 스타일링 전략을 선택하는 것이 중요합니다.

Tailwind 공식 가이드: https://tailwindcss.com/docs/guides/nextjs

심화학습

Q1. Tailwind의 유틸리티 스타일이 유지보수에 어떤 장단점을 가질까?

A: 장점은 빠른 개발과 일관된 스타일링이며, 단점은 클래스명이 길어지고 복잡한 UI에선 추적이 어려울 수 있습니다.

Q2. CSS 모듈을 쓸 때 class 이름 충돌을 막는 이유는 뭘까?

A: 모듈 스코프는 클래스명이 다른 컴포넌트와 겹치지 않도록 자동으로 해시 처리되어 안정성을 높입니다.

Q3. Tailwind와 styled-components를 혼합해서 사용할 수 있을까? 어떤 구조가 이상적일까?

A: 가능하지만 컨벤션이 중요합니다. Tailwind는 UI 기본 틀 구성에, styled-components는 조건부 스타일링이나 theme 구성에 적합합니다.