Tailwind CSS Functions & Directives

Directives

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

Directives는 Tailwind CSS 프로젝트에 특별한 기능을 제공하는 CSS에서 사용할 수 있는 사용자 지정 Tailwind 관련 at-rules입니다.

 

@tailwind

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

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

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

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

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

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

 

@layer

https://tailwindcss.com/docs/functions-and-directives#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;
}

 

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

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

.bar {
  @apply foo;
}

/*************************/

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

.bar {
  color: blue;
}

 

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

/* 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;
}

 

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

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

 

구성 요소별 CSS에서 @apply 사용

Vue 및 Svelte와 같은 구성 요소 프레임워크는 각 구성 요소 파일에 있는 <style> 블록 내에 구성 요소별 스타일을 추가하는 것을 지원합니다.

글로벌 CSS에서 정의한 사용자 정의 클래스를 다음 구성 요소별 <style> 블록 중 하나에 @적용하려고 하면 클래스가 존재하지 않는다는 오류가 발생합니다.

/* main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .card {
    background-color: theme('colors.white');
    border-radius: theme('borderRadius.lg');
    padding: theme('spacing.6');
    box-shadow: theme('boxShadow.xl');
  }
}

<!-- Card.svelte -->
<div>
  <slot></slot>
</div>

<style>
  div {
    /* 이 파일과 main.css가 별도로 처리되므로 작동하지 않습니다. */
    @apply card;
  }
</style>

 

이는 Vue 및 Svelte와 같은 언더 더 후드가 모든 `<style>` 블록을 독립적으로 처리하고 PostCSS 플러그인 체인을 각각 독립적으로 실행하기 때문입니다.

즉, 각각 `<style>` 블럭이 있는 성분이 10개 있으면 Tailwind가 10번씩 별도로 실행되며 각 실행은 다른 실행에 대한 지식이 없습니다. 따라서 `Card.svelte`에서 `@apply card`를 시도하면 실패합니다. 왜냐하면 Tailwind는 Svelte가 `Card.svelte`와 `main.css`를 완전히 분리하여 처리한 이후 `card` 클래스가 존재하는지 모르기 때문입니다.

이 문제를 해결하는 방법은 plugin system을 사용하여 구성 요소에 '@apply'할 사용자 지정 스타일을 정의하는 것입니다.

/* tailwind.config.js */
const plugin = require('tailwindcss/plugin')

module.exports = {
  // ...
  plugins: [
    plugin(function ({ addComponents, theme }) {
      addComponents({
        '.card': {
          backgroundColor: theme('colors.white'),
          borderRadius: theme('borderRadius.lg'),
          padding: theme('spacing.6'),
          boxShadow: theme('boxShadow.xl'),
        }
      })
    })
  ]
}

 

이렇게 하면 이 구성 파일을 사용하는 Tailwind에서 처리된 모든 파일이 해당 유형에 액세스할 수 있습니다.

솔직히, 가장 좋은 해결책은 이런 이상한 일을 전혀 하지 않는 것입니다. Tailwind의 유틸리티를 사용하려는 방식으로 직접 당신의 마크업에서 사용하고, 이런 일을 하기 위해 `@apply` 기능을 남용하지 마세요. 그러면 당신은 훨씬 더 나은 경험을 할 수 있을 것입니다.

 

Functions

Tailwind는 CSS에서 Tailwind 관련 값에 액세스하는 데 사용할 수 있는 몇 가지 사용자 지정 기능을 추가합니다. 이러한 함수는 빌드 시 평가되며 최종 CSS에서 정적 값으로 대체됩니다.

 

theme()

점 표기법을 사용하여 Tailwind 구성 값에 액세스하려면 `theme()` 함수를 사용하십시오.
선언의 일부에 대해서만 테마 구성의 값을 참조하려는 경우 `@apply` 대신 유용한 대안이 될 수 있습니다.

.content-area {
  height: calc(100vh - theme('spacing.12'));
}

 

점이 포함된 값(spacing scale의 `2.5` 값처럼)에 액세스해야 하는 경우 대괄호 표기법을 사용할 수 있습니다.

.content-area {
  height: calc(100vh - theme('spacing[2.5]'));
}

 

Tailwind는 중첩된 객체 구문을 사용하여 기본 색상 팔레트를 정의하므로, 점 표기법을 사용하여 중첩된 색상에 액세스해야 합니다.

 

 

중첩된 색상 값에 액세스할 때 대시 구문 사용 안 함

.btn-blue {
  background-color: theme('colors.blue-500');
}

 

점 표기법을 사용하여 중첩된 색 값에 액세스

.btn-blue {
  background-color: theme('colors.blue.500');
}

 

screen()

`screen` 기능을 사용하면 자신의 CSS에 있는 값을 복제하는 대신 이름으로 중단점을 참조하는 미디어 쿼리를 만들 수 있습니다.

@media screen(sm) {
  /* ... */
}

 

이렇게 하면 빌드 시 기본 화면 값으로 해결되어 지정된 중단점과 일치하는 일반 미디어 쿼리가 생성됩니다.

@media (min-width: 640px) {
  /* ... */
}