> For the complete documentation index, see [llms.txt](https://taewoongs-organization.gitbook.io/jtwjs-dev-wiki/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://taewoongs-organization.gitbook.io/jtwjs-dev-wiki/dev_note/tailwind/directives.md).

# Directives

##  Directives

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

### @apply

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

#### Usage

```css
.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
}
```

```markup
<!-- 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

```css
@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);
  }
}
```