🔧 Tailwind 10장: 커스텀 스타일과 디렉티브

/* 계층 순서: base → components → utilities (위에서 아래로 우선순위 높아짐) */
 
@layer base {
  /* 🏛️ 가장 낮은 우선순위 */
  /* HTML 요소 기본 스타일, 전역 폰트, CSS reset 등 */
  /* 유틸리티 클래스 하나로도 덮어쓸 수 있어야 하는 스타일 */
}
 
@layer components {
  /* 🧩 중간 우선순위 */
  /* 재사용 컴포넌트 스타일 (.btn, .card, .prose 등) */
  /* @apply 를 주로 쓰는 공간 */
}
 
@layer utilities {
  /* ⚡ 가장 높은 우선순위 */
  /* 단일 속성 유틸리티 클래스들 */
  /* 직접 추가할 일이 거의 없음 — Tailwind 가 자동 관리 */
}

/* globals.css */
@import "tailwindcss";
 
@layer base {
  /* 전역 기본 스타일 */
  html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
 
  /* 모든 이미지 기본값 */
  img, video {
    max-width: 100%;
    height: auto;
  }
 
  /* 커스텀 포커스 스타일 전역 적용 */
  *:focus-visible {
    outline: 2px solid theme('colors.brand.500');
    outline-offset: 2px;
  }
 
  /* 한국어 텍스트 최적화 */
  body {
    word-break: keep-all;
    overflow-wrap: break-word;
  }
}

@layer components {
  /* 🎯 올바른 @apply 사용처 — 써드파티 라이브러리 스타일 오버라이드 */
 
  /* react-markdown 본문 스타일 */
  .prose-custom {
    @apply text-base leading-relaxed text-gray-700 dark:text-gray-300;
  }
 
  .prose-custom h1 { @apply text-3xl font-bold text-gray-900 dark:text-white mb-4; }
  .prose-custom h2 { @apply text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-3; }
  .prose-custom p  { @apply mb-4; }
  .prose-custom a  { @apply text-brand-600 hover:text-brand-700 underline; }
 
  .prose-custom code {
    @apply rounded bg-gray-100 px-1.5 py-0.5 text-sm font-mono text-gray-800 dark:bg-gray-700 dark:text-gray-200;
  }
 
  .prose-custom pre {
    @apply rounded-xl bg-gray-900 p-4 overflow-x-auto;
  }
}

/* react-select, react-datepicker 같은 라이브러리는 HTML 을 직접 제어 불가 */
@layer components {
  /* DatePicker 커스텀 스타일 */
  .react-datepicker__day--selected {
    @apply bg-brand-600 text-white;
  }
 
  .react-datepicker__day:hover {
    @apply bg-brand-100 text-brand-700;
  }
}

@layer base {
  /* 모든 input/select/textarea 에 일관된 스타일 적용 */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  select,
  textarea {
    @apply block w-full rounded-lg border border-gray-300 px-4 py-2.5 text-sm
           placeholder:text-gray-400
           focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/20
           dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:placeholder:text-gray-500;
  }
}

@layer components {
  /* CMS 콘텐츠 영역 — HTML 태그에 직접 클래스를 붙일 수 없는 경우 */
  .content-area h1 { @apply text-3xl font-bold mb-6; }
  .content-area h2 { @apply text-2xl font-semibold mb-4 mt-8; }
  .content-area p  { @apply text-base leading-relaxed text-gray-700 mb-4; }
  .content-area ul { @apply list-disc list-inside mb-4 space-y-1; }
  .content-area li { @apply text-gray-700; }
}

@import "tailwindcss";
 
/* node_modules 안에 있는 UI 라이브러리의 클래스도 번들에 포함 */
@source "../node_modules/@my-company/ui-components/dist";
 
/* 동적으로 생성되는 클래스 파일 */
@source "./templates/**/*.html";

// ❌ 문제: 동적으로 생성된 클래스는 Tailwind 가 감지 못해!
const color = 'blue';
const className = `bg-${color}-500`;  // Tailwind 가 이 클래스를 번들에서 제거!
 
// ✅ 해결법 1: 전체 클래스 이름을 정적으로 선언
const colorMap = {
  blue: 'bg-blue-500',
  red:  'bg-red-500',
  green: 'bg-green-500',
};
const className = colorMap[color];
 
// ✅ 해결법 2: safelist (v3) 또는 강제 포함
// tailwind.config.js
module.exports = {
  safelist: [
    'bg-blue-500',
    'bg-red-500',
    'bg-green-500',
    // 또는 패턴으로
    { pattern: /bg-(blue|red|green)-(500|600|700)/ },
  ],
};

/* app/globals.css */
@import "tailwindcss";
 
/* ===== 디자인 토큰 ===== */
@theme {
  --color-brand-500: #8b5cf6;
  --color-brand-600: #7c3aed;
  --color-brand-700: #6d28d9;
  --font-sans: 'Pretendard Variable', -apple-system, sans-serif;
}
 
/* ===== Base Layer: 전역 기본 스타일 ===== */
@layer base {
  html { scroll-behavior: smooth; }
  body { word-break: keep-all; }
 
  /* 전역 input 스타일 */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  textarea {
    @apply block w-full rounded-lg border border-gray-300 px-4 py-2.5 text-sm
           focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/20;
  }
}
 
/* ===== Components Layer: 재사용 컴포넌트 ===== */
@layer components {
  /* 마크다운 콘텐츠 스타일 */
  .prose-korean {
    @apply text-base leading-relaxed text-gray-700 dark:text-gray-300;
  }
  .prose-korean h1 { @apply text-3xl font-bold text-gray-900 dark:text-white mb-6 mt-0; }
  .prose-korean h2 { @apply text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-4 mt-8; }
  .prose-korean p  { @apply mb-4; }
  .prose-korean code {
    @apply rounded bg-gray-100 px-1.5 py-0.5 text-sm font-mono dark:bg-gray-700;
  }
}

/* ❌ 이렇게 하면 Tailwind 를 쓰는 이유가 없어짐 */
 
/* 카드 컴포넌트를 @apply 로 만든다? */
.card {
  @apply flex flex-col gap-3 rounded-xl border border-gray-200 bg-white p-5 shadow-md;
}
 
/* 버튼을 @apply 로 만든다? */
.btn-primary {
  @apply rounded-xl bg-brand-600 px-6 py-3 font-semibold text-white hover:bg-brand-700;
}

// ✅ React 컴포넌트로 추출 — 이게 진짜 정답
function Card({ children }: Props) {
  return (
    <div className="flex flex-col gap-3 rounded-xl border border-gray-200 bg-white p-5 shadow-md">
      {children}
    </div>
  );
}
 
function Button({ children }: Props) {
  return (
    <button className="rounded-xl bg-brand-600 px-6 py-3 font-semibold text-white hover:bg-brand-700">
      {children}
    </button>
  );
}