Skip to content

Tailwind:Directives

@tailwind

@tailwind 디렉티브를 사용하여 Tailwind의 base, components, utilities 및 variants 스타일을 CSS에 삽입합니다. 

/**
 * Tailwind의 기본 스타일과 플러그인에 의해 등록된 모든 기본 스타일을 주입한다.
 */
@tailwind base;

/**
 * Tailwind의 컴포넌트 클래스와 플러그인에 의해 등록된 모든 컴포넌트 클래스를 주입한다.
 */
@tailwind components;

/**
 * Tailwind의 유틸리티 클래스와 플러그인에 의해 등록된 모든 유틸리티 클래스를 주입한다.
 */
@tailwind utilities;

/**
 * 이 directive를 사용하여 Tailwind가 각 클래스의 호버, 포커스, 응답, 다크 모드 및 기타 변형을 주입하는 위치를 제어합니다.
 * 생략할 경우 Tailwind는 기본적으로 스타일시트의 맨 끝에 이러한 클래스를 추가합니다.
 */
@tailwind variants;

@layer

@layer 디렉티브를 사용하여 Tailwind에 사용자 정의 스타일 집합이 속하는 "bucket"을 지정합니다. 유효한 계층은 base, components 및 utilities입니다. 

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

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

@layer components {
  .btn-blue {
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
  }
}

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

Tailwind는 @layer 지시어 내의 CSS를 해당 @tailwind 규칙과 동일한 위치로 자동으로 이동하므로 특정 문제를 피하기 위해 CSS를 특정 순서로 작성하는 것에 대해 걱정할 필요가 없습니다.

계층에 추가된 모든 사용자 정의 CSS는 기본적으로 Tailwind에 내장된 모든 클래스와 마찬가지로 해당 CSS가 실제로 HTML에서 사용되는 경우에만 최종 빌드에 포함됩니다.

사용자 정의 CSS를 @layer 디렉티브로 랩핑하면 hover: 및 focus:와 같은 규칙을 가진 수식어나 md: 및 lg:와 같은 응답 수식어를 사용할 수 있다.

@apply

@apply를 사용하여 기존 유틸리티 클래스를 사용자 지정 CSS에 인라인합니다.

이것은 사용자 정의 CSS를 작성해야 하지만(타사 라이브러리의 스타일을 재정의하는 것과 같이) 설계 토큰으로 작업하고 HTML에서 사용하는 것과 동일한 구문을 사용하기를 원할 때 유용합니다. 

.select2-dropdown {
  @apply rounded-b-lg shadow-md;
}
.select2-search {
  @apply border border-gray-300 rounded;
}
.select2-results__group {
  @apply text-lg font-bold text-gray-900;
}

변수와 함께 사용

변수와 함께 사용할 때는 다음과 같이 Sass의 Interpolation(보간)기능인 대괄호 문법 사용: 

$my-val: 12rem;

.parent {
  @apply w-[#{$my-val}];
}

사용시 주의점

기존 스타일 컴포넌트와 함께 사용할 경우 CSS Selector 가 무산된다.

예컨데, .btn > .btn-disable 를 사용할 경우 

.parent {
  @apply btn;

  .child {
    @apply btn-disable;
  }
}

와 같이 사용하면 @apply로 인해 btn과 btn-disable의 내용이 각각 .parent와 .child 에 치환/삽입되므로 클래스명을 사용한 CSS Selector가 작동되지 않는다.

이 경우 그냥 Tag 의 class attribute 에 직접 넣는게 좋다.

important

@apply가 있는 모든 규칙은 기본적으로 !important가 제거되어 특정 문제가 발생하지 않습니다: 

.foo {
  color: blue !important;
}
.bar {
  @apply foo;
}

CSS 결과: 

.foo {
  color: blue !important;
}
.bar {
  color: blue;
}

기존 클래스를 @apply하고 !important로 만들려면 선언의 끝에 !important를 추가하면 됩니다. 

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

Sass/SCSS를 사용하는 경우 이 기능을 사용하려면 Sass의 Interpolation(보간) 기능을 사용해야 합니다. 

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

See also

Favorite site