tailwind @apply

 

@apply🚚

이와 같은 코드가 있다고 가정할 때 우리는 다른 태그도 동일한 클래스를 사용하고 싶다면 복붙하면 된다.

하지만 복붙하면 코드 읽기도 불편하고 관리하기도 힘들어진다.

 

따라서 재사용성을 위해서 따로 커스텀 클래스를 만들 수 있다. 그 방법이 바로 @apply를 활용하는 것이다.

우리는 nav_link라는 커스텀 클래스를 만들어보겠다.

 

scss파일에 이렇게 @apply를 적어주면 된다.

@apply를 적지 않으면 tailwind의 code를 사용할 수 없기 때문에 꼭 적어주어야 한다.

적지 않으려면 저걸 모두 margin-left : 8 이런식으로 해줘야 하기때문이다.

그럼 아래의 코드 두줄은 완벽히 동일한 역할을 수행해낸다.

 

 

 

이 뿐만아니라 nav_link안에 있는 py-8까지도 scss의 특성을 활용한다면 이렇게 간단히 바꿀 수 있다.