⚡ Tailwind 12장: 성능 최적화와 실무 베스트 프랙티스

/* 소스에서 이 클래스들만 발견되면 */
/* flex p-4 bg-blue-600 text-white rounded-xl */
 
/* 빌드된 CSS 는 이것만 포함 */
.flex { display: flex }
.p-4 { padding: 1rem }
.bg-blue-600 { background-color: #2563eb }
.text-white { color: #fff }
.rounded-xl { border-radius: 0.75rem }

/* 개발자가 쓴 코드 */
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
 
/* Lightning CSS 가 자동으로 처리한 결과 (구형 브라우저 호환) */
.container {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

npm install -D prettier-plugin-tailwindcss

// .prettierrc
{
  "plugins": ["prettier-plugin-tailwindcss"],
  "tailwindConfig": "./tailwind.config.js"
}

{/* 저장 전 */}
<div className="shadow-md p-5 flex rounded-xl bg-white gap-3 flex-col border border-gray-200">
 
{/* 저장 후 (자동 정렬) */}
<div className="flex flex-col gap-3 rounded-xl border border-gray-200 bg-white p-5 shadow-md">

npm install -D eslint-plugin-tailwindcss

// .eslintrc
{
  "plugins": ["tailwindcss"],
  "rules": {
    "tailwindcss/classnames-order": "warn",     // 클래스 순서 경고
    "tailwindcss/no-contradicting-classnames": "error",  // 충돌 클래스 에러
    "tailwindcss/no-unnecessary-arbitrary-value": "warn" // 불필요한 임의값 경고
  }
}

// ❌ 한 줄에 너무 많은 클래스 — 가독성 저하
<div className="flex flex-col gap-3 rounded-xl border border-gray-200 bg-white p-5 shadow-md transition-all duration-300 hover:-translate-y-1 hover:shadow-lg dark:border-gray-700 dark:bg-gray-800">
 
// ✅ 방법 1: 여러 줄로 정리 (영호 선호 방식)
<div className={cn(
  // 레이아웃
  'flex flex-col gap-3',
  // 모양
  'rounded-xl border p-5',
  // 색상
  'border-gray-200 bg-white',
  // 효과
  'shadow-md transition-all duration-300',
  // 인터랙션
  'hover:-translate-y-1 hover:shadow-lg',
  // 다크 모드
  'dark:border-gray-700 dark:bg-gray-800',
)}>
 
// ✅ 방법 2: 컴포넌트 변수로 분리
const cardClass = cn(
  'flex flex-col gap-3 rounded-xl border p-5',
  'border-gray-200 bg-white shadow-md',
  'transition-all duration-300 hover:-translate-y-1 hover:shadow-lg',
  'dark:border-gray-700 dark:bg-gray-800',
);
 
return <div className={cardClass}>

<!-- 미리 정의되지 않은 정확한 값을 사용할 때 -->
<div class="top-[117px]">     <!-- top: 117px -->
<div class="w-[calc(100%-2rem)]"> <!-- width: calc(100% - 2rem) -->
<div class="bg-[#bada55]">    <!-- 특정 hex 색상 -->
<div class="grid-cols-[1fr_2fr_1fr]"> <!-- 복잡한 grid 열 정의 -->

<!-- 디자인 시스템 토큰으로 표현할 수 없는 정확한 수치 -->
<div class="h-[72px]">   <!-- 내비게이션 바: 64px도 80px도 아닌 딱 72px -->
<div class="top-[3px]">  <!-- 픽셀 퍼펙트 정렬이 필요한 경우 -->
 
<!-- CSS 함수 사용 -->
<div class="w-[calc(100vw-320px)]">  <!-- 사이드바 너비 제외한 나머지 -->
<div class="bg-[url('/hero-bg.jpg')]"> <!-- 배경 이미지 URL -->
 
<!-- 복잡한 Grid 정의 -->
<div class="grid-cols-[200px_1fr_300px]">  <!-- 고정+가변+고정 3열 -->

<!-- 디자인 시스템 내 값인데 임의값으로 쓰는 경우 -->
<div class="p-[16px]">   <!-- p-4 로 쓰면 됨! -->
<div class="p-[24px]">   <!-- p-6 으로 쓰면 됨! -->
<div class="text-[14px]"> <!-- text-sm 으로 쓰면 됨! -->
 
<!-- 브랜드 색상인데 임의값으로 하드코딩 -->
<div class="bg-[#7c3aed]">  <!-- @theme 에 등록하면 bg-brand-600 으로 쓸 수 있음 -->

# Next.js 빌드 후 CSS 번들 크기 확인
next build
 
# .next/static/css/ 폴더에서 CSS 파일 확인
ls -lh .next/static/css/

// ❌ 영철이의 실수: 동적 클래스 → 스타일 없음
const colorVariants = ['blue', 'green', 'red'];
 
function ColorChip({ color }: { color: string }) {
  return (
    // 빌드 후 이 클래스들이 CSS 에 없음!
    <span className={`bg-${color}-100 text-${color}-700`}>
      {color}
    </span>
  );
}
 
// ✅ 영호의 해결책: 전체 클래스 이름 매핑
const colorMap = {
  blue:  { bg: 'bg-blue-100',  text: 'text-blue-700'  },
  green: { bg: 'bg-green-100', text: 'text-green-700' },
  red:   { bg: 'bg-red-100',   text: 'text-red-700'   },
} as const;
 
type Color = keyof typeof colorMap;
 
function ColorChip({ color }: { color: Color }) {
  const { bg, text } = colorMap[color];
  return (
    <span className={cn('rounded-full px-3 py-0.5 text-xs font-semibold', bg, text)}>
      {color}
    </span>
  );
}

// 🔍 영호의 퍼포먼스 체크리스트
// Chrome DevTools → Performance → Layers 패널에서 확인
 
// ❌ Layout 유발 (CPU 처리, 비쌈)
<div className="hover:w-80">     {/* width 변경 → 레이아웃 리플로우 */}
<div className="hover:top-10">   {/* position 변경 → 레이아웃 리플로우 */}
 
// ✅ Composite 처리 (GPU, 저렴)
<div className="hover:-translate-y-2">  {/* transform → Composite 레이어 */}
<div className="hover:opacity-80">      {/* opacity → Composite 레이어 */}