tailwind css @apply

@apply

core/urls.py

  tailwindcss를 사용하면서 여러 곳에서 중복되는 class가 있을 것이다. 개발자는 이러한 class를 하나로 묶어서 새로운 class를 생성할 수 있다. 새로운 class를 적용하려면 styles.scss에 @apply를 통해서 적용할 수 있다.

  다음은 assets/scss/styles.scss에서 새로이 만든 .nav__link다. @apply를 이용해서 기존에 있던 utility classes를 나의 custom class에 적용할 수 있다.

@tailwind base;
@tailwind components;

.nav_link {
  @apply font-semibold text-gray-700  hover:border-gray-600 border-b-2 border-transparent;
  a {
    @apply block py-7 px-4;
  }
}

@tailwind utilities;

  nav.html에서 사요오딘 nav__link다. 바로 web page에 적용되는 것을 확인할 수 있다.

nav.html

만약 적용이 되지 않았다면 브라우저의 cache를 삭제해 보면 된다. 기존에 있던 cache 때문에 적용이 안 될 때가 있다.

참고 자료

• 노마드 코더의 Airbnb 클론 강의
• @apply on tailwindcss

소스 코드

github.com/zpskek/airbnb-clone-v3/commit/7f793e31b23021b93471786ef91a39193c40685f