icon안동민 개발노트

Tailwind CSS 설정 및 사용

 Tailwind CSS는 유틸리티 우선 CSS 프레임워크로, 빠르고 유연한 UI 개발을 가능하게 합니다. 이 절에서는 Next.js 프로젝트에 Tailwind CSS를 통합하는 방법과 효율적인 사용 패턴에 대해 알아보겠습니다.

Tailwind CSS 설정 방법

  1. 필요한 패키지 설치 :
npm install -D tailwindcss postcss autoprefixer
  1. Tailwind 설정 파일 생성 :
npx tailwindcss init -p
  1. tailwind.config.js 파일 수정 :
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
  1. 글로벌 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의 장점

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

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

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

효율적인 사용 패턴

  1. 컴포넌트 추상화 : 자주 사용되는 스타일 조합을 컴포넌트로 추상화
  2. @apply 지시어 활용 : 복잡한 클래스 조합을 CSS로 추출
.btn-primary {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}
  1. 반응형 디자인 : Tailwind의 반응형 접두사 활용 (sm:, md:, lg:, xl:)
  2. 다크 모드 : dark: 접두사를 사용하여 다크 모드 스타일 정의

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

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

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

 구현 예시

'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를 효과적으로 활용하면, 생산성을 크게 향상시키고 유지보수가 용이한 스타일 시스템을 구축할 수 있습니다.

CSS-in-JSNextAuth.js 설정