Tailwindcss - 지시어 Directives (base, components, utilities)

 

laravel 에서 

 

resources/css/app.css

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

 

기본지식 : At-rules

 

https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule

At-rules - CSS: Cascading Style Sheets | MDN

 

기본형태 :

/* General structure */
@identifier (RULE);

/* Example: tells browser to use UTF-8 character set */
@charset "utf-8";

 

정의된 지시어

@charset, @import, @namespace

 

@tailwindcss 지시어를 사용해서 tailwindcss 를 다룬다.

사용자가 추가 세팅을 위한 커스텀 지시가 있다.

 

@layer base, @layer components, @layer utilites

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

@apply 지시어를 사용해서 tailwindcss 에서 정의된 스타일을 추가할 수 있다.