[ Tailwind CSS ] tailwind directives(@)

@tailwind

tailwind의 base, components, utilities, variants 스타일을 적용하기 위해 사용하는 디렉티브

/**
 * Tailwind의 기본 스타일과 플러그인이 등록한 모든 기본 스타일을 삽입
 */
@tailwind base;

/**
 * Tailwind의 컴포넌트 클래스와 플러그인이 등록한 모든 컴포넌트 클래스를 삽입
 */
@tailwind components;

/**
 * Tailwind의 유틸리티 클래스와 플러그인이 등록한 모든 유틸리티 클래스를 삽입
 */
@tailwind utilities;

/**
 * 각 클래스의 hover, focus, responsive, dark mode 등 다양한 변형 클래스의 삽입 위치를 제어
 *
 * 생략할 경우 Tailwind는 기본적으로 이러한 클래스를 스타일 시트의 맨 끝에 추가한다
 */
@tailwind variants;

 

 

 

 

@layer

어떤 “bucket”에 커스텀 스타일을 작성할지

• “bucket” → base, components, utilities

 

layer 내부에 작성된 custom CSS는 최종적으로 필드 파일에 포함된다. (사용되었다면)

hover: focus: md: lg: 와 같은 modifiers들도 사용 가능하다.

@layer base {
  :root {
    --tw-primary-50: #eff7ff;
  }
  h1 {
     @apply text-2xl;
  }
}

 

 

 

 

@apply

존재하는 클래스를 custom CSS에 사용하기 위해 사용

즉, @apply와 함께 tailwind Class 명으로 custom CSS 작성이 가능하다.

 

너무 많은 apply를 남용하는 것은 좋지 않음

공통 스타일 정리 : 반복되는 스타일을 @apply로 정리하여 둔다.

@layer components {
  /*
  * Button 스타일
  */
  .btn {
    @apply flex h-35 w-140 cursor-pointer items-center justify-center rounded-[4px] px-20 py-4 disabled:cursor-default;
  }
}