Tailwind CSS 심화: 커스터마이징 + 플러그인

import type { Config } from 'tailwindcss';

export default {
  content: ['./app/**/*.{ts,tsx}', './components/**/*.{ts,tsx}'],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        brand: {
          50:  '#eef2ff',
          500: '#6366f1',
          900: '#312e81',
        },
        // CSS 변수 활용
        bg: 'var(--bg)',
        fg: 'var(--fg)',
      },
      fontFamily: {
        display: ['var(--font-pretendard)', 'sans-serif'],
        mono:    ['var(--font-jetbrains)', 'monospace'],
      },
      spacing: {
        '4.5': '1.125rem',
        '128': '32rem',
      },
      animation: {
        'fade-in': 'fadeIn 0.3s ease-out',
        'slide-up': 'slideUp 0.4s cubic-bezier(0.22, 1, 0.36, 1)',
      },
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        slideUp: {
          '0%': { transform: 'translateY(20px)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' },
        },
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
  ],
} satisfies Config;

@layer components {
  .btn {
    @apply inline-flex items-center justify-center px-4 py-2 rounded-md
           font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed;
  }
  .btn-primary {
    @apply btn bg-indigo-600 text-white hover:bg-indigo-700;
  }
  .btn-secondary {
    @apply btn bg-gray-200 text-gray-900 hover:bg-gray-300;
  }
}

// components/Button.tsx
import { cva, type VariantProps } from 'class-variance-authority';

const button = cva(
  'inline-flex items-center justify-center rounded-md font-medium transition-colors',
  {
    variants: {
      variant: {
        primary:   'bg-indigo-600 text-white hover:bg-indigo-700',
        secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300',
        danger:    'bg-red-600 text-white hover:bg-red-700',
        ghost:     'bg-transparent hover:bg-gray-100',
      },
      size: {
        sm: 'h-8 px-3 text-sm',
        md: 'h-10 px-4',
        lg: 'h-12 px-6 text-lg',
      },
    },
    defaultVariants: { variant: 'primary', size: 'md' },
  }
);

interface Props
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof button> {}

export function Button({ variant, size, className, ...rest }: Props) {
  return <button className={button({ variant, size, className })} {...rest} />;
}


// 사용
<Button variant="primary" size="lg">큰 주요 버튼</Button>
<Button variant="danger" size="sm">작은 위험</Button>

// 마크다운 / CMS 본문
<article className="prose prose-lg dark:prose-invert max-w-none
                    prose-headings:font-display
                    prose-a:text-indigo-600
                    prose-code:bg-gray-100 prose-code:px-1 prose-code:rounded">
  {markdownContent}
</article>


// 자동 적용:
// - h1, h2, h3 폰트·간격
// - p 줄간격
// - a 색상·hover
// - code 배경
// - ul/ol 들여쓰기
// - blockquote 스타일