[tailwind css] 자식 요소에 class 추가해주기

컴포넌트로 생성하여 가져와서 사용하는데 

하위요소의 font-size만 바꿔주면 되는데 

컴포넌트에 props로 추가하자니 일이 커지고,,,,

이럴 때 유용하게 쓸 수 있는 자식요소에 class를 추가해 주는 방법을 알게 되어 정리한다. 

 

 

className ='w-[200px]  [&_input]:w-[140px] '

 

[&_...]   [ ] 안의 &은 자신을 뜻한다. 

_ 는 띄어쓰기, 그러니까 후손을 나타낸다. 

 

[&>..] 이렇게 사용한다면 자식요소를 가리킬 수 있다. 

 

 

위에 쓴 input 처럼 태그를 사용할 수도 있고 

 

.idInput처럼 .을 찍고 class를 적는 것도 가능하다. 

 

우선순위가 있다보니 태그를 적었을 때 안된다면 class로  사용해 보고 안된다면 !를 사용하여 inportant를 줘서

우선순위를 높여줄 수 있다. 

 

이걸 모를 때는 어려운 방법 밖에 생각을 못하다가 알게 되니 유용하게 사용하고 있다.