react-slick으로 만든 캐러셀에 아래와 같이 슬라이드 사이 여백을 적용하려고 했다.
구글링을 해보니 이렇게 슬라이더 전체와 슬라이드 각각에 margin을 주면 된다고 했다.
https://github.com/kenwheeler/slick/issues/582
하지만 다른 사람들처럼 Slider에 스타일을 적용하려는데 적용이 되지 않았다.
문제는 tailwind-styled-component는 이런 접근을 지원하지 않는다는 것이었다.
제대로 보지 않고 styled component 랑 똑같이 사용하면 되겠지? 하고 썼다가 시간을 날려먹었다..
styled component에서는 아래와 같이 자식 클래스명을 쓰면 바로 자식 요소를 타겟으로 스타일을 적용할 수 있다.
https://styled-components.com/docs/basics
하지만 tailwind에서는 자식 요소를 지정하려면 arbitrary variants(&)를 사용해야 한다.
**[&_.클래스명]**과 같이 ‘클래스명’을 가진 자식 요소를 지정해줄 수 있다.