Tailwind CSS 설정 및 사용

Tailwind CSS는 유틸리티 우선 CSS 프레임워크로, 빠르고 유연한 UI 개발을 가능하게 합니다.

이 절에서는 Next.js 프로젝트에 Tailwind CSS를 통합하는 방법과 효율적인 사용 패턴에 대해 알아보겠습니다.

Tailwind CSS 설정 방법

필요한 패키지 설치

npm install -D tailwindcss postcss autoprefixer

Tailwind 설정 파일 생성

npx tailwindcss init -p

tailwind.config.js 파일 수정

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

글로벌 CSS 파일에 Tailwind 지시어 추가

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

유틸리티 클래스 사용법

Tailwind CSS는 미리 정의된 유틸리티 클래스를 제공합니다.

function Button({ children }) {
  return (
    <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
      {children}
    </button>
  )
}

이 예제에서 bg-blue-500, hover:bg-blue-700, text-white 등은 Tailwind의 유틸리티 클래스입니다.

커스텀 설정

tailwind.config.js 파일에서 테마를 확장하거나 수정할 수 있습니다.

module.exports = {
  theme: {
    extend: {
      colors: {
        'custom-blue': '#1da1f2',
      },
      fontFamily: {
        'sans': ['Roboto', 'Arial', 'sans-serif'],
      },
    },
  },
}

이제 bg-custom-blue 클래스를 사용하여 커스텀 색상을 적용할 수 있습니다.

컴포넌트 기반 개발과의 조화

Tailwind CSS는 컴포넌트 기반 개발과 잘 어울립니다.

재사용 가능한 클래스 조합을 만들 수 있습니다.

function Card({ title, content }) {
  return (
    <div className="bg-white shadow-md rounded-lg p-6">
      <h2 className="text-xl font-bold mb-2">{title}</h2>
      <p className="text-gray-700">{content}</p>
    </div>
  )
}

Tailwind CSS의 장점

빠른 개발 : 미리 정의된 클래스로 빠르게 스타일링
일관성 : 사전 정의된 디자인 시스템 제공
커스터마이징 : 쉬운 테마 및 설정 변경
성능 : 사용된 스타일만 포함하여 CSS 파일 크기 최소화

5장 페이지, 레이아웃 컴포넌트와의 연관성

Tailwind CSS는 5장에서 다룬 페이지 및 레이아웃 컴포넌트와 매우 잘 어울립니다.

레이아웃 컴포넌트에 Tailwind 클래스를 적용하여 일관된 디자인을 쉽게 구현할 수 있으며, 페이지별로 필요한 스타일을 빠르게 추가할 수 있습니다. 또한, Tailwind의 반응형 클래스를 사용하여 다양한 화면 크기에 대응하는 레이아웃을 쉽게 만들 수 있습니다.

효율적인 사용 패턴

컴포넌트 추상화 : 자주 사용되는 스타일 조합을 컴포넌트로 추상화
@apply 지시어 활용 : 복잡한 클래스 조합을 CSS로 추출

.btn-primary {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}

반응형 디자인 : Tailwind의 반응형 접두사 활용 (sm:, md:, lg:, xl:)
다크 모드 : dark: 접두사를 사용하여 다크 모드 스타일 정의

실습 : 반응형 내비게이션 바 만들기

Tailwind CSS를 사용하여 다음 요구사항을 만족하는 반응형 내비게이션 바를 구현해보세요.

로고 표시
네비게이션 링크 목록
모바일에서는 햄버거 메뉴로 변환
다크 모드 지원

구현 예시

'use client'
import { useState } from 'react'
import Link from 'next/link'
 
export default function Navbar() {
  const [isOpen, setIsOpen] = useState(false)
 
  return (
    <nav className="bg-white dark:bg-gray-800 shadow-lg">
      <div className="max-w-6xl mx-auto px-4">
        <div className="flex justify-between">
          <div className="flex space-x-7">
            <div>
              <Link href="/" className="flex items-center py-4 px-2">
                <span className="font-semibold text-gray-500 dark:text-white text-lg">Logo</span>
              </Link>
            </div>
            <div className="hidden md:flex items-center space-x-1">
              <Link href="/" className="py-4 px-2 text-gray-500 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300">Home</Link>
              <Link href="/about" className="py-4 px-2 text-gray-500 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300">About</Link>
              <Link href="/services" className="py-4 px-2 text-gray-500 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300">Services</Link>
              <Link href="/contact" className="py-4 px-2 text-gray-500 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300">Contact</Link>
            </div>
          </div>
          <div className="md:hidden flex items-center">
            <button className="outline-none mobile-menu-button" onClick={() => setIsOpen(!isOpen)}>
              <svg className="w-6 h-6 text-gray-500 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400"
                   fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
                <path d="M4 6h16M4 12h16M4 18h16"></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
      <div className={`${isOpen ? 'block' : 'hidden'} md:hidden`}>
        <Link href="/" className="block py-2 px-4 text-sm hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-300">Home</Link>
        <Link href="/about" className="block py-2 px-4 text-sm hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-300">About</Link>
        <Link href="/services" className="block py-2 px-4 text-sm hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-300">Services</Link>
        <Link href="/contact" className="block py-2 px-4 text-sm hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-300">Contact</Link>
      </div>
    </nav>
  )
}

이 실습을 통해 Tailwind CSS의 유틸리티 클래스를 사용하여 반응형 디자인을 구현하고, 다크 모드를 지원하는 방법을 경험할 수 있습니다.

또한, 상태 관리를 통해 모바일 메뉴의 토글 기능을 구현하는 방법도 학습할 수 있습니다.

Tailwind CSS는 빠른 프로토타이핑과 일관된 디자인 시스템 구축에 매우 유용합니다.

하지만 클래스 이름이 길어질 수 있으므로, 적절한 컴포넌트 추상화와 함께 사용하는 것이 좋습니다. Tailwind CSS를 효과적으로 활용하면, 생산성을 크게 향상시키고 유지보수가 용이한 스타일 시스템을 구축할 수 있습니다.

이전으로 다음으로