TailwindCSS의 클래스를 TypeScript와 연결

TailwindCSS는 UI를 신속하게 구축하기 위한 강력한utility-first CSS 프레임워크입니다. 또한 결과 번들에서 사용하지 않는 모든 유틸리티 클래스를 자동으로 제거합니다. 그러나 이는 class name와 같이 Tailwind에서 제공하는 전체bg-gray-900가 코드 내에 있는 경우에만 작동합니다.

구조에 대한 유틸리티 기능

이 제한을 극복하기 위해 다음과 같이 끝내기 전에 약간 놀았습니다.

function cx(...cns: (boolean | string | undefined)[]): string {
  return cns.filter(Boolean).join(" ");
}

이 작은 기능은 이 경우 매우 편리합니다. 이를 통해 다양한 방식으로 연결utility classes할 수 있습니다. 예를 들어:

const styles = {
  base: "bg-gray-700",
  abc: {
    a: "hover:bg-gray-600",
    b: "hover:bg-gray-500",
    c: "hover:bg-gray-400",
  },
};

const classes = cx(styles.base, styles.abc["b"]);

bool expressions를 사용하는 것도 가능합니다.

const classes = cx(true && "bg-gray-700", false && "hover:bg-gray-600");

클래스 hover:bg-gray-600는 표현식 결과가 cx이므로 false로 필터링됩니다.

전체 예

import { PropsWithChildren, ReactElement } from "react";

const styles = {
  base: "rounded",
  variants: {
    default: "bg-gray-600",
    primary: "bg-blue-600",
    secondary: "bg-green-600",
  },
  sizes: {
    sm: "px-1 py-1",
    md: "px-2 py-1",
    lg: "px-3 py-1",
  },
};

type Variant = keyof typeof styles.variants;

type Size = keyof typeof styles.sizes;

type Props = {
  type?: "button" | "submit";
  variant?: Variant;
  size?: Size;
  disabled?: boolean;
};

function Button({
  type = "button",
  variant = "default",
  size = "md",
  disabled = false,
  children,
}: PropsWithChildren<Props>): ReactElement {
  const classes = cx(
    styles.base,
    !disabled && styles.variants[variant],
    styles.sizes[size],
    disabled && "bg-gray-800"
  );

  return (
    <button type={type} className={classes} disabled={disabled}>
      {children}
    </button>
  );
}

코드베이스 어딘가에서 다음과 같이 사용할 수 있습니다.

<Button>Click</Button>
<Button variant="primary">Click</Button>
<Button variant="secondary" sizes="lg">Click</Button>
<Button disabled>Click</Button>