🪵 6. Tailwind CSS로 디자인 시스템 및 UI 컴포넌트 세팅

아래 기준 환경 하에서 작성됐습니다.

• vite: 5.4.10
• react: 18.3.1
• typescript: 5.6.2
• tailwind: 3.4.14

라이브러리 선택 기준은 이 페이지를 참고해주세요.

효율적인 UI 컴포넌트 스타일링: Tailwind CSS + cn.ts 이 글을 기준으로 설치하는 내용을 다루고 있습니다.

Tailwind CSS 설치 및 세팅

1. Tailwind CSS 설치

프로젝트의 스타일링을 빠르게 구현하기 위해 Tailwind CSS를 설치했습니다.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

2. Tailwind CSS 초기 설정

생성된 tailwind.config.js 파일에 경로를 설정해줍니다. /src 안 모든 컴포넌트와 페이지에서 Tailwind CSS를 사용할 수 있도록 세팅합니다.

// tailwind.config.js
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. 스타일 파일 설정

src/index.css 파일에 Tailwind CSS의 기본 디렉티브를 추가합니다.

/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

추가: prettier-plugin-tailwindcss

Tailwind CSS 클래스들을 자동으로 정렬해주는 플러그인입니다. 코드 일관성을 높이기 위해 prettier-plugin-tailwindcss 플러그인을 추가합니다.

npm install -D prettier prettier-plugin-tailwindcss

설치 후, .prettierrc 파일에 아래와 같이 설정을 추가하세요.

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

컬러 시스템 구축하기

Tailwind CSS의 theme.extend.colors 옵션을 활용해 프로젝트에서 사용할 컬러 팔레트를 설정합니다.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        violet: {
          50: '#EBE9FF',
          100: '#DAD7FF',
          200: '#BEB6FF',
          // ...
        },
        halfbaked: {
          50: '#F0FAFB',
          100: '#D9F2F4',
          200: '#B8E5E9',
          // ...
        },
        // 필요한 추가 색상 정의
      },
    },
  },
}

이 컬러 시스템은 디자인 가이드와 일관된 색상을 적용할 수 있도록 합니다. 피그마에 컬러 변수가 있다면 더욱 쉽게 되겠네요.

디자인이 정해진 공통 컴포넌트 구현기

1. 유틸리티 설정

먼저 효율적인 컴포넌트 스타일링을 위한 핵심 라이브러리들을 설치합니다.

npm install clsx tailwind-merge class-variance-authority

그리고 src/lib/utils/cn.ts 파일을 생성해 cn 함수를 만듭니다.

import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

2. 기본 컴포넌트 구현

공통 컴포넌트로 유명한 Button 컴포넌트를 만들어봅니다.

import * as React from 'react';
import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from '@/utils/cn';

const buttonVariants = cva(
  'inline-flex items-center justify-center gap-2 whitespace-nowrap ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
  {
    variants: {
      variant: {
        proimary: 'bg-violet-500 border-2 border-violet-950 hover:bg-violet-600',
        secondary: 'bg-eastbay-900 border-2 border-violet-950 hover:bg-eastbay-950',
      },
      size: {
        sm: 'h-11 w-full text-2xl font-medium text-stroke-md',
        lg: 'h-14 rounded-2xl w-full text-2xl font-medium text-stroke-md',
        icon: 'h-10 w-10',
      },
    },
    defaultVariants: {
      variant: 'proimary',
      size: 'lg',
    },
  },
);

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean;
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({ className, variant, size, ...props }, ref) => {
  return <button className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
});
Button.displayName = 'Button';

export { Button, buttonVariants };

3. 컴포넌트 사용 예시

<Button onClick={handleSubmit} className="font-neodgm-pro text-2xl font-normal">제출</Button>

4. 장점 및 특징

1. 체계적인 디자인 시스템 구현
   • 일관된 클래스 처리 패턴으로 컴포넌트 스타일링
   • 프로젝트 전반의 디자인 일관성 확보
   • 코드 스타일의 규격화 달성
2. 자동화된 스타일 관리
   • 컴포넌트 내부/외부 스타일 우선순위 자동 조정
   • 클래스 충돌 없는 안전한 스타일 확장
   • 조건부 스타일링의 간소화
3. 개발 생산성 향상
   • 타입 시스템을 통한 props 자동 완성
   • 컴포넌트 variants와 size 등의 타입 안전성
   • 빌드 타임 최적화로 런타임 성능 보장
4. 확장 가능한 컴포넌트 아키텍처
   • 스타일 변형의 재사용성 확보
   • 기존 컴포넌트의 유연한 확장
   • 새로운 디자인 요구사항에 빠른 대응