Next.js와 Tailwind CSS 설정 및 활용법

2025-07-31 | dev / programming | Programming, Nextjs, Tailwindcss, Css, Frontend

PostCSS부터 반응형 디자인까지, 실무에서 바로 사용할 수 있는 설정법

Next.js와 Tailwind CSS는 현대 프론트엔드 개발에서 가장 인기 있는 조합 중 하나입니다. 강력한 React 프레임워크와 유틸리티 우선 CSS 프레임워크를 결합하여 빠르고 효율적인 웹 개발을 가능하게 합니다. 이번 글에서는 설정부터 활용까지 전체 과정을 단계별로 알아보겠습니다.

🚀 Next.js에 Tailwind CSS 설정하기

기본 설정 단계

Next.js 프로젝트가 이미 있다면, 다음 단계로 Tailwind CSS를 설치할 수 있습니다:

# Tailwind CSS와 관련 패키지 설치
npm install -D tailwindcss postcss autoprefixer

# 설정 파일 생성
npx tailwindcss init -p

이 명령어는 두 개의 설정 파일을 생성합니다:

tailwind.config.js: Tailwind CSS 설정
postcss.config.js: PostCSS 설정

tailwind.config.js 설정

생성된 설정 파일을 프로젝트에 맞게 수정합니다:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      // 커스텀 색상, 폰트, 간격 등을 여기에 추가
      colors: {
        primary: '#3B82F6',
        secondary: '#64748B',
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
    },
  },
  plugins: [
    // 필요한 플러그인들을 여기에 추가
    // require('@tailwindcss/forms'),
    // require('@tailwindcss/typography'),
  ],
}

글로벌 CSS 파일 설정

styles/globals.css 파일에 Tailwind 지시어를 추가합니다:

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

/* 커스텀 CSS가 필요한 경우 여기에 추가 */
@layer components {
  .btn-primary {
    @apply bg-primary text-white px-4 py-2 rounded hover:bg-blue-600 transition-colors;
  }
}

🔧 PostCSS 설정 이해하기

PostCSS가 필요한 이유

“왜 Tailwind를 쓰는데 PostCSS가 필요한가?”라는 질문을 자주 받습니다. 이는 Tailwind CSS가 PostCSS 플러그인으로 구현되어 있기 때문입니다.

PostCSS는 다음과 같은 역할을 수행합니다:

Tailwind 지시어 처리: @tailwind base, @tailwind components 등을 실제 CSS로 변환
최적화: 사용하지 않는 스타일을 제거하여 번들 크기 최적화
브라우저 호환성: Autoprefixer를 통해 필요한 CSS 접두사 자동 추가
확장성: 필요에 따라 추가적인 CSS 처리 플러그인 통합

postcss.config.js 기본 설정

생성된 postcss.config.js 파일의 기본 설정은 다음과 같습니다:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

이 기본 설정만으로도 대부분의 경우 충분합니다. 특별한 PostCSS 플러그인이나 추가 설정이 필요하지 않은 한, 이 파일을 수정할 필요가 없습니다.

고급 PostCSS 설정 (선택사항)

필요에 따라 추가 플러그인을 설정할 수 있습니다:

module.exports = {
  plugins: {
    'postcss-import': {},
    tailwindcss: {},
    autoprefixer: {},
    ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {}),
  },
}

📚 Tailwind CSS 문법 완벽 가이드

Tailwind CSS는 유틸리티 우선(utility-first) CSS 프레임워크입니다. 다음은 주요 문법과 사용 예시입니다.

여백 (Margin / Padding)

<!-- 마진 -->
<div class="m-4">모든 방향 마진 16px</div>
<div class="mx-4 my-2">좌우 마진 16px, 상하 마진 8px</div>
<div class="mt-8 mr-4 mb-2 ml-1">각 방향별 마진</div>

<!-- 패딩 -->
<div class="p-6">모든 방향 패딩 24px</div>
<div class="px-4 py-2">좌우 패딩 16px, 상하 패딩 8px</div>

숫자는 4px 단위로 증가합니다 (1 = 4px, 2 = 8px, 4 = 16px, 8 = 32px).

크기 (Width / Height)

<!-- 너비 -->
<div class="w-1/2">부모의 50%</div>
<div class="w-64">256px (16rem)</div>
<div class="w-full">100%</div>
<div class="w-screen">100vw</div>

<!-- 높이 -->
<div class="h-32">128px</div>
<div class="h-screen">100vh</div>
<div class="min-h-full">최소 높이 100%</div>

색상

<!-- 텍스트 색상 -->
<p class="text-blue-500">파란색 텍스트</p>
<p class="text-gray-800">진한 회색 텍스트</p>

<!-- 배경색 -->
<div class="bg-red-100">연한 빨간색 배경</div>
<div class="bg-gradient-to-r from-blue-500 to-purple-600">그라데이션 배경</div>

<!-- 테두리 색상 -->
<div class="border-2 border-green-400">초록색 테두리</div>

폰트와 텍스트

<!-- 폰트 크기 -->
<h1 class="text-4xl">큰 제목</h1>
<p class="text-lg">큰 본문</p>
<small class="text-sm">작은 텍스트</small>

<!-- 폰트 두께 -->
<p class="font-thin">얇은 글꼴</p>
<p class="font-bold">굵은 글꼴</p>
<p class="font-black">매우 굵은 글꼴</p>

<!-- 텍스트 스타일 -->
<p class="italic uppercase tracking-wide">이탤릭, 대문자, 글자 간격</p>
<p class="text-center">가운데 정렬</p>
<p class="underline line-through">밑줄, 취소선</p>

Flexbox 레이아웃

<!-- 기본 Flex -->
<div class="flex">
  <div>아이템 1</div>
  <div>아이템 2</div>
</div>

<!-- Flex 방향 -->
<div class="flex flex-col">세로 방향</div>
<div class="flex flex-row">가로 방향</div>

<!-- 정렬 -->
<div class="flex items-center justify-between">
  <div>왼쪽</div>
  <div>오른쪽</div>
</div>

<div class="flex items-center justify-center min-h-screen">
  <div>화면 중앙</div>
</div>

Grid 레이아웃

<!-- 기본 Grid -->
<div class="grid grid-cols-3 gap-4">
  <div>아이템 1</div>
  <div>아이템 2</div>
  <div>아이템 3</div>
</div>

<!-- 반응형 Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div>반응형 아이템</div>
</div>

<!-- Grid 영역 지정 -->
<div class="grid grid-cols-4">
  <div class="col-span-2">2칸 차지</div>
  <div>1칸</div>
  <div>1칸</div>
</div>

반응형 디자인

Tailwind는 모바일 우선(mobile-first) 접근 방식을 사용합니다:

<!-- 브레이크포인트별 스타일 -->
<div class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4">
  <!-- 모바일: 100%, 태블릿: 50%, 데스크톱: 33.33%, 큰 화면: 25% -->
</div>

<!-- 반응형 텍스트 -->
<h1 class="text-2xl md:text-4xl lg:text-6xl">
  반응형 제목
</h1>

<!-- 반응형 숨김/표시 -->
<div class="hidden md:block">태블릿 이상에서만 표시</div>
<div class="block md:hidden">모바일에서만 표시</div>

브레이크포인트:

sm: 640px 이상
md: 768px 이상
lg: 1024px 이상
xl: 1280px 이상
2xl: 1536px 이상

상태 (States)

<!-- 호버 상태 -->
<button class="bg-blue-500 hover:bg-blue-700 text-white px-4 py-2 rounded">
  버튼
</button>

<!-- 포커스 상태 -->
<input class="border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 px-3 py-2 rounded">

<!-- 활성 상태 -->
<button class="bg-green-500 active:bg-green-700">클릭 중</button>

<!-- 비활성 상태 -->
<button class="bg-gray-500 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
  비활성 버튼
</button>

그룹 상호작용

<!-- 부모 호버 시 자식 변경 -->
<div class="group">
  <img class="group-hover:opacity-75">
  <p class="group-hover:text-blue-500">부모에 호버하면 이 텍스트가 파란색으로</p>
</div>

<!-- 형제 요소 상호작용 -->
<div>
  <input class="peer" type="checkbox">
  <label class="peer-checked:text-blue-500">체크박스 선택 시 파란색</label>
</div>

🎨 실무 활용 팁

1. 커스텀 컴포넌트 클래스 만들기

/* styles/globals.css */
@layer components {
  .btn {
    @apply px-4 py-2 rounded font-medium transition-colors;
  }
  
  .btn-primary {
    @apply bg-blue-500 text-white hover:bg-blue-600;
  }
  
  .btn-secondary {
    @apply bg-gray-200 text-gray-800 hover:bg-gray-300;
  }
  
  .card {
    @apply bg-white rounded-lg shadow-md p-6;
  }
}

2. 다크 모드 지원

// tailwind.config.js
module.exports = {
  darkMode: 'class', // 또는 'media'
  content: [
    // ...
  ],
  // ...
}

<!-- 다크 모드 스타일 -->
<div class="bg-white dark:bg-gray-800 text-black dark:text-white">
  라이트/다크 모드 대응
</div>

3. 성능 최적화

// tailwind.config.js - 사용하지 않는 스타일 제거
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  // 사용하지 않는 색상이나 크기를 비활성화
  theme: {
    colors: {
      // 필요한 색상만 포함
      white: '#ffffff',
      blue: {
        500: '#3B82F6',
        600: '#2563EB',
      },
    },
  },
}

마무리

Next.js와 Tailwind CSS를 함께 사용하면 빠른 개발에 도움이 됩니다. 처음에는 유틸리티 클래스가 많아 보일 수 있지만, 조금씩 사용하다 보면 CSS 파일을 왔다 갔다 하지 않고도 컴포넌트 안에서 스타일링을 끝낼 수 있어서 편리합니다.

이 글에서 소개한 내용들이 도움이 되었으면 좋겠습니다. 프로젝트에 맞게 조정하여 사용해보세요!

Next.js와 Tailwind CSS 설정 및 활용법

🚀 Next.js에 Tailwind CSS 설정하기

기본 설정 단계

tailwind.config.js 설정

글로벌 CSS 파일 설정

🔧 PostCSS 설정 이해하기

PostCSS가 필요한 이유

postcss.config.js 기본 설정

고급 PostCSS 설정 (선택사항)

📚 Tailwind CSS 문법 완벽 가이드

여백 (Margin / Padding)

크기 (Width / Height)

색상

폰트와 텍스트

Flexbox 레이아웃

Grid 레이아웃

반응형 디자인

상태 (States)

그룹 상호작용

🎨 실무 활용 팁

1. 커스텀 컴포넌트 클래스 만들기

2. 다크 모드 지원

3. 성능 최적화

마무리

SmPark's Blog

오류

🚀 Next.js에 Tailwind CSS 설정하기

기본 설정 단계

tailwind.config.js 설정

글로벌 CSS 파일 설정

🔧 PostCSS 설정 이해하기

PostCSS가 필요한 이유

postcss.config.js 기본 설정

고급 PostCSS 설정 (선택사항)

📚 Tailwind CSS 문법 완벽 가이드

여백 (Margin / Padding)

크기 (Width / Height)

색상

폰트와 텍스트

Flexbox 레이아웃

Grid 레이아웃

반응형 디자인

상태 (States)

그룹 상호작용

🎨 실무 활용 팁

1. 커스텀 컴포넌트 클래스 만들기

2. 다크 모드 지원

3. 성능 최적화

마무리

Templates (for web app):

오류