728x90
컴포넌트를 재사용하면서 단순히 하위 요소의 font-size만 변경하고 싶은 경우,
컴포넌트에 props로 전달하는 대신 Tailwind CSS의 "arbitrary variants" 기능을 사용하면 간편하게 해결할 수 있습니다.
기본 문법
Tailwind CSS에서는 클래스 이름에 대괄호([ ]) 안에 CSS 선택자와 함께 사용하여, 부모 요소를 기준으로 하위 요소(자손 혹은 직계 자식)를 선택할 수 있습니다.
- 후손 선택:
[&_input]:w-[140px]
여기서 &는 현재 요소(자신)를 의미하고, _input은 공백을 나타내므로, 현재 요소의 모든 후손 중 <input> 태그를 선택합니다.
<div className="w-[200px] [&_input]:w-[140px]">
<input type="text" />
</div>
위 예시에서는 부모 <div>는 너비 200px, 그 안의 모든 <input>은 너비 140px로 적용됩니다.
- 직계 자식 선택:
[&>input]:w-[140px]
이 경우에는 바로 자식인 <input> 태그에만 스타일을 적용합니다.
<div className="w-[200px] [&>input]:w-[140px]">
<input type="text" />
<div>
<input type="text" /> {/* 이 input은 선택되지 않음 */}
</div>
</div>
클래스 선택자 사용
클래스 선택자로 지정하려면, 점(.)을 사용합니다.
<div className="[&_.idInput]:text-lg">
<input className="idInput" type="text" />
</div>
위 예시에서는 idInput 클래스를 가진 요소의 글자 크기를 text-lg로 설정합니다.
우선순위 조정
Tailwind CSS에서는 선택자 우선순위 때문에 원하는 요소에 스타일이 적용되지 않을 때가 있습니다.
이럴 때는, 선택자에! 를 붙여 **!important**를 적용하여 우선순위를 높일 수 있습니다.
<div className="[&>input]:!text-xl">
<input type="text" />
</div>
위와 같이 작성하면, 바로 자식인 <input> 태그에 대해 text-xl 스타일이 강제로 적용됩니다.
정리
- [&_태그]: 현재 요소의 모든 후손 중 해당 태그를 선택합니다.
- [&>태그]: 현재 요소의 직계 자식 중 해당 태그를 선택합니다.
- [&_.className]: 현재 요소의 후손 중 지정한 클래스를 가진 요소 선택.
- 필요시 !를 붙여 중요도를 높일 수 있습니다.
끝
728x90
