[Tailwind CSS] Tailwind 지시어: 기본 스타일 추가(@tailwind), 활용(@apply), 확장(@layer)

Tailwind CSS 지시어(Directives)

: CSS 안에서 Tailwind 스타일을 설정하거나 커스터마이징할 수 있는 명령어

• 기본 스타일 추가(@tailwind), 클래스 재활용(@apply), 스타일 확장(@layer)을 쉽게 구현할 수 있게 도와준다.

 

 

 

@tailwind

: Tailwind의 기본 스타일(base), 컴포넌트(components), 유틸리티(utilities) 등을 CSS에 추가한다.

/* globals.css */
@tailwind base; /* tailwind의 기본적인 리셋 및 기본 스타일 */
@tailwind components; /* 클래스 이름을 컴포넌트로 묶음 */
@tailwind utilities; /* 모든 유틸리티 클래스 가져옴 */

 

 

 

@apply

: Tailwind 유틸리티 클래스를 CSS 내에서 사용할 수 있게 한다.

• 기존 클래스를 재활용해 새로운 스타일을 정의할 수 있다.

/* a.css */
a {
   @apply text-blue-500; // 링크 텍스트 색을 파란색으로 설정
}

 

 

 

@layer

: 특정 스타일 그룹(base, components, utilities 등)을 확장하거나 추가한다.

• 사용자 정의 스타일을 Tailwind의 각 레이어(base, components, utilities)에 맞게 삽입합니다.

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

// 기본 스타일(base)에 a 스타일 추가
@layer base {
  a {
    @apply text-blue-500;
  }
}

// 컴포넌트로 btn 스타일(class name) 묶기
@layer components {
  .btn {
    @apply w-full bg-black h-10 text-white rounded-sexy-name mt-tomato;
  }
}

// 새로운 유틸리티 클래스 추가
@layer utilities {
  .text-bigger-hello {
    @apply text-3xl font-semibold;
  }
}

 

 

---

 

 

Functions & Directives - Tailwind CSS

 

Functions & Directives - Tailwind CSS

 

Functions & Directives - Tailwind CSS

 

Functions & Directives - Tailwind CSS