class-variance-authority
-
Tailwind CSS 잘 활용하기 with Clxs, CVA, twMergeStyle/Libraries 2024. 3. 31. 14:45
최근 팀 내에서 Tailwind CSS Class를 사용할 때 좀 더 효율성 있게 작성하는 방식에 대해 논의하게 되었습니다. 기존 작업 중인 프로젝트에서는 Styled Component와 Tailwind CSS를 같이 쓰는 방식을 채택하여 사용 중인데 새롭게 들어가는 프로젝트에선 clsx, class-variance-authority, tailwind-merge를 조합하여 사용하는 방식을 사용해 보려고 합니다. 필요 라이브러리 ※ React에서 Tailwind CSS 설정이 되어 있는 환경을 가정합니다. clsx는 조건부 className 처리를 위해 사용되며 라이브러리 크기가 매우 작은 장점을 가지고 있습니다. import { clsx } from 'clsx'; clsx('w-full', true &&..