4단계: Tailwind CSS 커스터마이징과 다크모드 설정

Tailwind CSS 커스터마이징과 다크모드 설정

Pliny는 Tailwind CSS를 사용하여 전체 UI를 구성하며, 다크모드 스위치도 기본 탑재되어 있습니다.
이 설정을 제대로 이해하면, 디자인 테마를 자유롭게 커스터마이징할 수 있습니다.

4-1. Tailwind 설정 파일

tailwind.config.js

module.exports = {
  content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: 'class',
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
      colors: {
        primary: '#0ea5e9',
      },
    },
  },
  plugins: [require('@tailwindcss/typography')],
};

• darkMode: 'class' → 다크모드가 html 태그의 클래스에 따라 작동함
• 커스터마이징은 theme.extend를 통해 색상, 폰트, 여백 등을 확장

4-2. 다크모드 적용 방식

• 사용자가 테마 스위치를 누르면 html 태그에 dark 클래스가 붙음
• 해당 기능은 components/DarkSwitch.tsx에 구현되어 있음

body {
  @apply bg-white text-black dark:bg-black dark:text-white;
}

• Tailwind의 dark: 접두사를 사용하여 다크모드 스타일 지정 가능

4-3. Tailwind 커스터마이징 방법

색상 변경

extend: {
  colors: {
    primary: '#F97316',
  },
}

폰트 변경

extend: {
  fontFamily: {
    sans: ['Noto Sans KR', 'sans-serif'],
  },
}

• Google Fonts는 components/Head.tsx 또는 _document.tsx에서 로드해야 함

4-4. Typography 설정

• Tailwind Typography 플러그인은 .prose 클래스 기반의 마크다운 스타일을 자동 지정

plugins: [require('@tailwindcss/typography')]

• 커스터마이징은 /styles/prose.css 또는 tailwind.config.js > typography 확장에서 가능

4-5. 실제 적용 예시

<h1 className="text-3xl font-bold text-primary dark:text-cyan-400">
  블로그 제목
</h1>

• text-primary: Tailwind에서 설정한 사용자 색상
• dark: 접두사: 다크모드 대응 클래스

요약

• Tailwind는 tailwind.config.js에서 색상, 폰트, spacing 등 확장 가능
• 다크모드는 darkMode: 'class' 방식이며, 사용자 클릭으로 전환됨
• Typography 플러그인을 통해 마크다운 스타일을 자동화할 수 있음
• 모든 스타일 요소는 클래스 조합으로 손쉽게 변경 가능

심화학습

Q1. Tailwind에서 다크모드를 media 방식이 아닌 class로 설정하는 이유는 무엇일까?

A: media는 OS 테마에 따라 자동 적용되지만, class는 사용자가 직접 제어할 수 있어 UX 제어가 가능하며 토글 UI와 연동할 수 있습니다.

Q2. 폰트를 Google Fonts에서 커스터마이징할 때, 최적 로딩 전략은 어떻게 구성해야 할까?

A: _document.tsx에서 link rel="preconnect"을 추가하고, rel="stylesheet"로 불러오면 성능 최적화에 유리합니다.

Q3. Typography 플러그인을 비활성화하고 전체 스타일을 직접 커스터마이징하려면 어떤 순서로 접근하는 게 좋을까?

A: 1) tailwind.config.js에서 typography 제거 → 2) prose 클래스 제거 → 3) 직접 마크다운에 적용할 기본 스타일을 전역 CSS 또는 컴포넌트별로 설정