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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://taewoongs-organization.gitbook.io/jtwjs-dev-wiki/dev_note/tailwind/directives.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.