Directives

Directives

@ 와 함께 사용되는 명령어로, 지시문를 사용하면 CSS를 좀 더 간결하고 유연하게 작성할 수 있다.

@apply

기존 유틸리티 클래스를 사용하여 커스텀 스타일 구문을 추가할 때 사용된다.

Usage

.custom {
  @apply relative mb-4 after:left-0 after:top-0 after:absolute 
  last:text-purple-300 first:text-orange-400 after:bg-slate-500 
  after:w-full after:h-full after:z-0
}

<!-- Before -->
<ul >
  <li class="relative mb-4 after:left-0 after:top-0 after:absolute last:text-purple-300 first:text-orange-400 after:bg-slate-500 after:w-full after:h-full after:z-0"><span class="z-10 block">first</span></li>
  <li class="relative mb-4 after:left-0 after:top-0 after:absolute last:text-purple-300 first:text-orange-400 after:bg-slate-500 after:w-full after:h-full"><span class="z-10 block">second</span></li>
  <li class="relative mb-4 after:left-0 after:top-0 after:absolute last:text-purple-300 first:text-orange-400 after:bg-slate-500 after:w-full after:h-full"><span class="z-10 block">third</span></li>
  <li class="relative mb-4 after:left-0 after:top-0 after:absolute last:text-purple-300 first:text-orange-400 after:bg-slate-500 after:w-full after:h-full"><span class="z-10 block">fourth</span></li>
  <li class="relative mb-4 after:left-0 after:top-0 after:absolute last:text-purple-300 first:text-orange-400 after:bg-slate-500 after:w-full after:h-full"><span class="z-10 block">fifth</span></li>
</ul>
  
<!-- After -->
<ul >
  <li class="custom"><span class="z-10 block">first</span></li>
  <li class="custom">second</span></li>
  <li class="custom"><span class="z-10 block">third</span></li>
  <li class="custom"><span class="z-10 block">fourth</span></li>
  <li class="custom"><span class="z-10 block">fifth</span></li>
</ul>

@layer

커스텀 스타일 구문이 어느 레이어(base, components, utilitis)에 속하는지 구분하는 지시문

추가한 스타일을 체계적으로 관리하기 위해 용도에 맞는 레이어를 지정하여 코드의 가독성과 유지보수성을 높힌다.

Usage

@tailwind base;
@tailwind components;
@tailwind utilities;


@layer base {
  h1 {
    @apply text-[32px] text-blue-500;
  }
}

@layer components {
  .btn {
    @apply rounded-md hover:bg-cyan-800 transition-all ease-out bg-slate-600 
    text-red-700 px-[6px];
  }
}

@layer utilities {
 .rotate-15deg {
    transform: rotate(15deg);
  }
}