[Tailwind CSS] Tailwind CSS의 지시어, @tailwind @layer @apply에 대해 이해해보자

 

✏️ 이 글은 사이드프로젝트 "스무디"를 개발하며 배운 점을 정리하여 기록한 글입니다.

 

개인 프로젝트에서 Tailwind CSS를 처음 사용해보았고, 신세계를 맛보았다.

누군가는 선호하지 않는다했던 Tailwind. 나 또한 클래스명의 나열으로 지저분해지는 코드가 싫어 사용해보기도 전에 불호를 택했었다.

하지만 생각을 바꾸어 사용해보니 생각보다 편리하고 빠른(물론 시간이 필요했다..) CSS 작성에 이것이 신세계구나 싶었다.

 

학습의 시간은 필요하지만, 배워두면 잘 사용할 Tailwind CSS.

이번 글에서는 Tailwind CSS에서 사용되는 지시어, @tailwind @layer @apply에 대해 정리해보려 한다. 

 

 

 

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

https://tailwindcss.com/docs/adding-custom-styles#using-css-and-layer

 

이 글의 출처는 Tailwind CSS의 공식문서 중

Directives 부분과 Adding Custom Styles의 Using CSS and @layer 입니다.

---

 

@tailwind

Tailwind를 처음 설치하면 CSS 파일에 Tailwind 지시어를 세팅하라는 순서가 나온다. 아래와 같은 코드를 추가하는 것이다.

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

 

 

@tailwind 지시어를 를 사용하여 Tailwind의 base, component, utilities, variants 스타일을 CSS에 삽입할 수 있는데, 여기서 각 스타일에 대해 알아보자.

/* Tailwind 기본 스타일로 Preflight(CSS 초기화 코드)는 base에서 세팅된다. */
@tailwind base; 

/* Tailwind 컴포넌트 클래스 */
@tailwind components; 

/* Tailwind 유틸리티 클래스 */
@tailwind utilities; 

/* variants
각 클래스의 hover, focus, responsive, dark mode, 기타 변형을 제어하는데 사용하는 지시어
생략할 경우 Tailwind는 기본적으로 스타일시트의 가장 아래에 추가한다.
*/
@tailwind variants;

 

@layer

Tailwind의 @layer 지시어를 사용하여 커스텀 스타일을 작성할 수 있는데, layer는 base, components, utilities에만 적용할 수 있다.

특정 요소에 대한 기본 스타일은 base, 재사용성이 높은 card, btn 등을 정의할 때는 components, Tailwind가 기본으로 제공하지 않는 유틸리티 클래스를 정의할 때는 utilities에 적용할 수 있다.

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

@layer base {
  h1 {
    @apply text-2xl;
  }
}

@layer components {
  .btn-custom {
    @apply bg-blue-500;
  }
  .btn-custom:hover {
    @apply bg-blue-700;
  }
}

@layer utilities {
  .filter-none {
    filter: none;
  }
  .filter-grayscale {
    filter: grayscale(100%);
  }
}

 

• @layer를 사용하여 CSS를 작성할 때, Tailwind가 해당 CSS를 적절한 위치로 자동으로 이동시기기 때문에 스타일의 순서로 인해 발생할 문제를 걱정할 필요가 없다. 예를 들어, @layer base로 작성된 스타일은 @tailwind base 규칙과 같은 위치에 삽입된다.

• @layer로 작성된 커스텀 CSS는 HTML에서 해당 클래스나 스타일이 실제로 사용될 때만 최종 CSS 파일에 포함된다. 이렇게 하면 불필요한 스타일이 제거되어 CSS 파일이 더 작아지고 효율적이게 된다.

• @layer 사용한 모든 커스텀 CSS는 hover, focus, md, lg와 같은 tailwind의 규칙을 적용할 수 있다. 이렇게 하면 Tailwind의 유틸리티 클래스 시스템을 그대로 활용하면서도, 사용자 정의 스타일을 더욱 유연하게 사용할 수 있다.

 

@apply

@apply는 기존 유틸리티 클래스를 커스텀 CSS에 추가하는데 사용할 수 있다.

.btn-custom {
  @apply rounded-b-lg shadow-md;
}

.btn-important-custom {
  @apply rounded-b-lg shadow-md !important;
}

 

 

• @apply를 사용하면 기본적으로 important 구문은 제거되며, 기존 클래스를 @apply 하고 important를 적용하려면 선언 끝에 추가하면 된다. (아래 코드 참고)

/* Input */
.foo {
  color: blue !important;
}

.bar {
  @apply foo;
}

/* Output */
.foo {
  color: blue !important;
}

.bar {
  color: blue;
}

/* Input */
.btn {
  @apply font-bold py-2 px-4 rounded !important;
}

/* Output */
.btn {
  font-weight: 700 !important;
  padding-top: .5rem !important;
  padding-bottom: .5rem !important;
  padding-right: 1rem !important;
  padding-left: 1rem !important;
  border-radius: .25rem !important;
}

 

---

💬

사이드 프로젝트를 진행했던 과정을 정리하면서 Tailwind의 @layer와 @apply에 대한 이해 없이 몇몇개의 블로그를 찾아보며 그 블로그에서 나왔던 대로 유추하며 코드를 작성했다는 사실을 알게되었다.

Tailwind를 사용하여 CSS를 작성하다보면 내 프로젝트에 적용될 기본 스타일을 추가해야 할 수도 있고, 내 컴포넌트에 적용될 스타일을 따로 작성해야 할 수도 있다. 또는 Tailwind에서 제공하지 않는 일부 CSS 코드를 직접 추가하여 사용해야 할 수도 있다. 물론 직접 인라인 스타일로 작성할 수도 있지만, CSS 파일에 위와 같이 선언을 해주면 좀 더 편리하고 Tailwind의 장점을 살리며 사용할 수 있다는 생각이 들었다. (@layer를 사용했을 때 스타일의 순서 문제를 걱정할 필요 없고, 실제 사용된 CSS만 빌드되는 등의 이점)