A reference for the custom functions and directives Tailwind exposes to your CSS.

Directives

• Directives are custom Tailwind-specific **at-rules(공식 CSS에 있는 문법이다)** you can use in your CSS that offer special functionality for Tailwind CSS projects.

@tailwind

• Tailwind의 base, components, utilities layers, 그리고 variants style을 추가하기 위해 @tailwind directive를 사용할 수 있다.

  /**
   * This injects Tailwind's base styles and any base styles registered by
   * plugins.
   */
  @tailwind base;
  
  /**
   * This injects Tailwind's component classes and any component classes
   * registered by plugins.
   */
  @tailwind components;
  
  /**
   * This injects Tailwind's utility classes and any utility classes registered
   * by plugins.
   */
  @tailwind utilities;
  
  /**
   * Use this directive to control where Tailwind injects the hover, focus,
   * responsive, dark mode, and other variants of each class.
   *
   * If omitted, Tailwind will append these classes to the very end of
   * your stylesheet by default.
   */
  @tailwind variants;
  

  • 이때 순서가 중요하다. 나중에 오는 애일수록 override가 가능하다. 그래서 base를 components가, components를 utilities가 override할 수 있는 것이다.

@layer

• 정의한 custom styles가 어떤(@tailwind directive로 정한) layer에 속하는지 명시하기 위해 @layer directive를 사용할 수 있다.

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

• 테일윈드가 @layer directive 안에 속한 CSS를 자동으로 해당하는 @tailwind rule 안으로 옮겨준다고 생각하면 된다. 따라서 @layer directive를 사용할 때는 @tailwind directive를 사용할 때와는 다르게 순서를 걱정할 필요는 없다. (어차피 알아서 옮겨지니까)

  • @layer로 감싼 custom CSS들은 (당연히) 다른 modifiers와 함께 사용할 수 있다.

• layer로 추가된 custom CSS들은, 실제로 HTML에 사용이 되어야만 CSS 빌드 시에 최종적으로 포함된다. (just like all of the classes built in to Tailwind by default)

@apply

• existing utility class들을 own custom CSS에 inline으로 사용하고 싶을때 @apply를 사용한다.

• 이것은 custom CSS를 작성하고 싶은데(예를들면 third-party library 등의 style을 override할때), 동시에 여전히 tailwind desing token(utility classes)를 사용하고 싶을때 유용하다.

  .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가 사용된 rule은 !important가 제거된다고 한다.

  /* Input */
  .foo {
    color: blue !important;
  }
  
  .bar {
    @apply foo;
  }
  
  /* Output */
  .foo {
    color: blue !important;
  }
  
  .bar {
    color: blue;
  }
  

  • !important가 필요하다면 그냥 @apply 사용할때 마지막에 추가하면 된다.

    /* 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 feature를 사용해야 한다고 한다.

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

Using @apply with per-component CSS

• Vue나 Svelte처럼 per-component style을 지원하는 framework에 해당하는 내용인듯 하다. 일단 생략.

@config

• @config directive는 특정 CSS file을 컴파일하기 위해 어떤 config 파일을 참고해야 하는지 Tailwind에게 알려주는 역할을 한다. 이것은 CSS 진입점(entry point)마다 다른 configuration files를 사용하는 프로젝트에 유용하다.

  @config "./tailwind.**site**.config.js";
  
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
  

  @config "./tailwind.**admin**.config.js";
  
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
  

  • @config directive에 명시하는 path는 해당 CSS 파일에 relative하며, PostCSS configuration이나 Tailwind CLI에 정의된 path보다 우선한다고 한다(take precedence).

• 만약 postcss-import를 사용하고 있다면, @import statements들은 @config 보다 앞에 위치해야 한다고 한다.

  @import "tailwindcss/base";
  @import "./custom-base.css";
  @import "tailwindcss/components";
  @import "./custom-components.css";
  @import "tailwindcss/utilities";
  
  @config "./tailwind.admin.config.js";
  

Functions