파피루스

cva와 함께 더 좋은 tailwindcss 사용하기 본문

Today I Learned

cva와 함께 더 좋은 tailwindcss 사용하기

떼굴펜 2024. 6. 25. 11:21

components ui lib

tailwindcss 동적 css 도와주는 lib

cva 사용해보기

  // 첫번째 인자<array | string> : 조합과 무관한 className
  // 두번째 인자 : 조합
  const chipVariants = cva(
    ["text-sm", "border", "rounded-full", "px-2.5", "py-0.5"],
    {
      variants: {
        intent: {
          primary: "bg-blue-500 border-blue-500 text-white",
          secondary: "bg-gray-500 border-gray-500 text-white",
          danger: "bg-red-500 border-red-500 text-white",
          warning: "bg-yellow-500 border-yellow-500 text-white",
          info: "bg-violet-500 border-violet-500 text-white",
          default: "bg-white border-black-500 text-black",
        },
      },
      // compoundVariants: [], //
      defaultVariants: { intent: "default" }, // 초기값은 어떤 것으로 할 것인지
    }
  );

props를 표현하는 방법

방법1)
type ButtonProps = {} & ButtonVariant &
DetailedHTMLProps<ButtonHTMLAttributes, HTMLButtonElement>;

방법2)
type ButtonProps = {} & ButtonVariant & ComponentProps<"button">;

하나의 컴포넌트에서 button, Link 두가지를 쓰고 싶을 때

 

Q&A) 여러개의 cva를 사용할 때 어떻게 쓰나요?

'Today I Learned' 카테고리의 다른 글

[next] image tag  (0) 2024.06.28
[next Js] Image tag + typescript generic  (0) 2024.06.26
CLS(Cumulative Layout Shift)  (0) 2024.06.21
[NextJs] 첫걸음  (0) 2024.06.20
glitch로 json server 배포 하기  (1) 2024.06.14