컴포넌트를 재사용하면서 단순히 하위 요소의 font-size만 변경하고 싶은 경우,컴포넌트에 props로 전달하는 대신 Tailwind CSS의 "arbitrary variants" 기능을 사용하면 간편하게 해결할 수 있습니다. 기본 문법Tailwind CSS에서는 클래스 이름에 대괄호([ ]) 안에 CSS 선택자와 함께 사용하여, 부모 요소를 기준으로 하위 요소(자손 혹은 직계 자식)를 선택할 수 있습니다.후손 선택:[&_input]:w-[140px]여기서 &는 현재 요소(자신)를 의미하고, _input은 공백을 나타내므로, 현재 요소의 모든 후손 중 태그를 선택합니다.   위 예시에서는 부모 는 너비 200px, 그 안의 모든 은 너비 140px로 적용됩니다.직계 자식 선택:[&>input]:w-..

Tailwind CSS는 빠른 프로토타이핑과 효율적인 CSS 파일 크기 최적화 덕분에 디자인 시스템을 구축할 때 매우 유용한 도구입니다.그 덕분에 회사에서 디자인 시스템을 만들 때 Tailwind를 적극적으로 활용하며, 일관된 디자인과 빠른 개발 속도를 실현할 수 있었습니다. 그러나 진행 과정에서 예상치 못한 문제에 직면하게 되었습니다.바로 '동적으로 변하는 데이터에 Tailwind CSS 클래스를 동적으로 할당하는 과정'에서 발생한 문제입니다. 문제 발생: 동적으로 Tailwind CSS 클래스 적용Tailwind CSS는 기본적으로 유틸리티 클래스 기반의 시스템입니다. 클래스를 미리 정의하고, 이를 HTML 요소에 적용하는 방식이죠. 하지만 동적으로 변하는 데이터에 따라 스타일을 변경해야 할 때는 문..