Tailwindcss를 더 영리하게 사용하기

 

@layer components {
  .btn {
    @apply h-10
    w-36 rounded-md
     bg-[#f8f9fa] text-sm 
     text-gray-800 transition-shadow 
     hover:shadow-md
     hover:ring-1
    hover:ring-gray-200 focus:outline-none
     active:ring-gray-300;
  }
  .link {
    @apply cursor-pointer hover:underline;
  }
  .header-icon {
    @apply cursor-pointer rounded-full
    bg-transparent p-2 text-4xl hover:bg-gray-200;
  }
}

이런 형식으로 작성하면 btn이라는 클래스를 적용했을때

btn {} 안에 있는 모든 클래스들이 바로 적용되게됩니다.

---

@layer components

@layer를 사용하면 관련 스타일을 별도의 레이어로 그룹화 할 수 있어요

이 layer는 base, components, utilities에만 적용할 수 있습니다!

base에 적용하고싶다면 @layer base 와 같은 형태로 작성하면 되겠죠?

 

레이어에 추가된 모든 사용자 정의 css는 기본적으로 tailwindcss에 내장된 모든 클래스랑 마찬가지로

해당 css가 HTML에서 실제로 사용되는 경우에만 최종 빌드에 포함된다고하니

작성해놓고 사용하지 않는 클래스가 있더라도 걱정할 필요가 없습니다.

---

@apply

@apply는 미리 정의된 클래스 또는 사용자 정의 클래스를 요소에 적용할 수 있는 기능입니다.

tailwindcss가 제공하는 클래스를 사용하여 조합을 만들려고할때 유용해요!

공식문서에 따르면 이 기능은 타사 라이브러리의 스타일을 재정의 하는 등

사용자 정의 CSS를 작성해야하지만 디자인 토큰으로 작업하고

HTML 에서 사용하던 것과 동일한 구문을 사용하려는 경우에 유용하다고 하네요

---

https://tailwindcss.com/docs/functions-and-directives

더 자세한 정보는 공식문서를 참고해보세요!