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