내가 레퍼런스가 되자 내가 레퍼런스가 되자

최근 팀 내에서 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 &&..

기존에 CSS in JS 라이브러리로 Styled Components를 사용 중에 이전에 사용해 경험이 좋았던 Tailwind CSS를 도입하여 같이 사용해 보기로 했습니다. Tailwind CSS의 클래스들을 CSS Objects로 변환하여 Styled Components나 emotion 같은 CSS in Js 라이브러리에서 해당 클래스를 사용할 수 있도록 twin.macro를 이용한 기본적인 셋업과 사용 방식에 대해 알아보겠습니다. 필요 라이브러리 Styled Components를 사용하기 위해 필요한 라이브러리를 설치합니다. npm install styled-components npm install @types/styled-components # or yarn add styled-components..