Tool

Tailwind CSS와 함께 사용하면 좋은 도구 모음

Clsx

조건부로 className 문자열을 구성하기 위한 도구

• props에 따라 동적으로 달라지는 스타일을 설정하기 위해 사용되는 도구로 classnames 와 clsx 가 있다.

• clsx 는 classnames 보다 더 가볍고 동일한 기능을 제공한다.

Install

yarn add clsx

CVA

className과 props를 연결하고 이와 관련한 타입을 수동으로 추가하고 관리하는 작업을 단순화하며, 스키마를 통해 코드의 일관성을 유지할 수 있도록 도움을 주는 도구

cva는 내부적으로 clsx를 사용하며, cx 함수를 제공하여 clsx와 유사한 기능을 제공한다. 하지만 "cva"는 "classValue" 타입을 제공하지 않아서 현재 두 개의 패키지를 동시에 사용해야 하는 상황이다.

Install

yarn add class-variance-authority

Reference

const componentVariant = cva(base, options);

• base → 컴포넌트에 적용되는 기본적인 스타일 클래스 문자열

  • string, string[], 또는 clsx 값으로 표현될 수 있다.

• options (optional)

  • variants → 컴포넌트에 적용되는 다양한 상태나 스타일의 변형을 정의

  • compoundVaraints → variants에 정의된 값들의 조합(AND 연산)을 기반으로 새로운 varaints를 추가하는 기능

  • defaultvariants → variants에 정의한 값들의 기본값을 설정

cva에서 제공하는 VariantProps를 사용하면 정의한 variants를 타입으로 추출하여 사용 가능하다.

const componentVariants = cva(...)

interface ComponentProps
  extends VariantProps<typeof componentVariants> {
 //..추가로 설정할 props 정의
}

cva를 사용해 생성된 props들은 undefined, null 타입 값도 추가되어지는데, 이는 해당 varaint를 완전히 무효화 시키기 위한 의도적인 기능 이라고 한다. #Issue ++ 지금은 실험 단계이지만 다음 버전에서는 null 대신 명시적으로 unset을 사용할 예정이라 한다.. #check

Usage

cva를 사용하여 기존 코드를 리팩토링 해보고 비교해보자.

Before

import type { ButtonHTMLAttributes } from 'react';
import classNames from 'classnames';

type ButtonVariant = 'primary' | 'secondary' | 'outlined' | 'ghost';
type ButtonSize = 'sm' | 'md' | 'lg' | 'xl';
type ButtonState = 'default' | 'hover';

const ButtonVariantClasses: Record<ButtonVariant, Record<ButtonState, string>> = {
  primary: {
    default: 'btn-primary',
    hover: 'btn-primary-hover',
  },
  secondary: {
    default: 'btn-secondary',
    hover: 'btn-secondary-hover',
  },
  outlined: {
    default: 'btn-outlined',
    hover: 'btn-outlined-hover',
  },
  ghost: {
    default: 'btn-ghost',
    hover: 'btn-ghost-hover',
  },
};

const ButtonSizeClasses: Record<ButtonSize, string> = {
  sm: 'btn-sm',
  md: 'btn-md',
  lg: 'btn-lg',
  xl: 'btn-xl',
};

const ButtonIconSizeClasses: Record<ButtonSize, string> = {
  sm: 'btn-icon-sm',
  md: 'btn-icon-md',
  lg: 'btn-icon-lg',
  xl: 'btn-icon-xl',
};

export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  className?: string;
  variant: ButtonVariant;
  size?: ButtonSize;
  fit?: boolean;
  label: string;
  IconOnly?: React.ReactElement;
  disabled?: boolean;
}

export const Button = ({
  className,
  variant,
  size = 'md',
  fit = false,
  IconOnly,
  disabled = false,
  label,
  ...buttonProps
}: ButtonProps) => {
  const ButtonVariantClassName = ButtonVariantClasses[variant];
  const ButtonIconSizeClassName = ButtonIconSizeClasses[size];

  return (
    <button
      {...buttonProps}
      className={classNames('btn-base', [ButtonVariantClassName.default], className, {
        [classNames('w-full', 'justify-center')]: fit,
        [ButtonSizeClasses[size]]: !IconOnly,
        [classNames(ButtonIconSizeClassName, 'justify-center', 'rounded-full')]: IconOnly,
        [ButtonVariantClassName.hover]: !disabled,
        [classNames('opacity-40', 'cursor-not-allowed')]: disabled,
      })}
    >
      <span className={classNames({ 'sr-only': IconOnly })}>{label}</span>
      {IconOnly ? <IconOnly.type {...IconOnly.props} size={size === 'sm' ? 20 : 24} /> : null}
    </button>
  );
};

After (CVA 활용)

import { VariantProps, cva, cx } from "class-variance-authority";
import { ButtonHTMLAttributes, forwardRef, ForwardedRef } from "react";

import { cn } from "../../utils";

const buttonVariants = cva(
  "flex items-center rounded px-[8px] font-bold focus:outline-none whitespace-nowrap select-none transition-all ease-in focus:ring-4 focus:ring-blue-100 dark:focus:ring-gray-100 dark:focus:ring-opacity-20",
  {
    variants: {
      variant: {
        primary: "bg-brand text-white hover:bg-shade",
        secondary: "bg-border text-primary hover:bg-tertiary",
        outlined: "bg-white text-brand border border-brand hover:bg-tint",
        ghost: "text-primary, hover: text-secondary",
        icon: "justify-center rounded-full",
      },
      fit: { true: "w-full justify-center" },
      size: {
        sm: "h-8 text-sm",
        md: "h-10 text-sm",
        lg: "h-12 text-md",
        xl: "h-[55px] text-lg",
      },
    },
    compoundVariants: [
      {
        variant: "icon",
        size: "sm",
        class: "h-8 w-8",
      },
      {
        variant: "icon",
        size: "md",
        class: "h-10 w-10",
      },
      {
        variant: "icon",
        size: "lg",
        class: "h-11 w-11",
      },
      {
        variant: "icon",
        size: "xl",
        class: "h-12 w-12",
      },
    ],
    defaultVariants: {
      variant: "primary",
      fit: false,
      size: "md",
    },
  }
);

export interface ButtonProps
  extends ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  label: string;
  IconOnly?: React.ReactElement;
}

export const Button = forwardRef(
  (
    {
      className,
      variant = "primary",
      size,
      fit,
      label,
      IconOnly,
      ...buttonProps
    }: ButtonProps,
    ref: ForwardedRef<HTMLButtonElement>
  ) => {
    const variantValue = IconOnly ? "icon" : variant;

    return (
      <button
        ref={ref}
        className={cn(
          buttonVariants({ variant: variantValue, size, fit, className })
        )}
        {...buttonProps}
      >
        <span className={cx({ "sr-only": IconOnly })}>{label}</span>
        {IconOnly ? (
          <IconOnly.type {...IconOnly.props} size={size === "sm" ? 20 : 24} />
        ) : null}
      </button>
    );
  }
);

props와 class를 연결하기 위해 추가되는 코드와 타입 선언이 깔끔하고 간결해졌다.

Tailwind-merge

클래스를 조합하고 중복을 피하여 스타일 충돌 이슈를 방지하고, 효율적으로 스타일을 정의하고 관리할 수 있도록 도와주는 도구

Install

yarn add tailwind-merge

Reference

• twMerge → 여러 클래스들을 병합하는 유틸 함수, 중복된 클래스 충돌을 해결하고, 가장 마지막에 전달된 클래스를 유지한다.

• twJoin → twMerge()와 달리 충돌을 해결하지 않는다. clsx와 비슷한 기능을 제공하고 사용법도 비슷하다. But 객체 인자는 지원하지 않음