@tailwind

 

Tailwind CSS에서는 @tailwind base, @tailwind components, @tailwind utilities를 사용하여 CSS를 구조화하고 유지 보수하기 쉽게 만듭니다.

 

@tailwind base

@tailwind base는 기본 스타일을 정의합니다. 여기에는 브라우저의 기본 스타일을 재정의하는 Tailwind의 사전 정의된 기본 스타일과 사용자 정의 스타일이 포함됩니다. 이를 통해 프로젝트 전반에 걸쳐 일관된 기본 스타일을 적용할 수 있습니다.

예시:

/* base.css */
@tailwind base;

@layer base {
  body {
    font-family: 'Inter', sans-serif;
    background-color: #f7fafc;
    color: #2d3748;
  }

  h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
  }
}

 

 

 

@tailwind components

@tailwind components는 재사용 가능한 컴포넌트를 정의하는 데 사용됩니다. 버튼, 카드, 모달 등과 같은 UI 컴포넌트를 여기에서 정의할 수 있습니다. 컴포넌트는 일반적으로 프로젝트 내 여러 위치에서 반복적으로 사용됩니다.

예시:

/* components.css */
@tailwind components;

@layer components {
  .btn {
    @apply px-4 py-2 bg-blue-500 text-white rounded-md;
  }

  .card {
    @apply p-4 shadow-md rounded-lg bg-white;
  }
}

 

 

 

 

@tailwind utilities

@tailwind utilities는 작은 유틸리티 클래스들을 정의하는 데 사용됩니다. Tailwind의 기본 제공 유틸리티 외에도 사용자 정의 유틸리티를 추가할 수 있습니다. 일반적으로 유틸리티 클래스는 단일 스타일 속성을 정의하며, 이들을 조합하여 스타일을 구성합니다.

예시:

/* utilities.css */
@tailwind utilities;

@layer utilities {
  .bg-brand {
    background-color: #3490dc;
  }

  .text-brand {
    color: #3490dc;
  }

  .border-brand {
    border-color: #3490dc;
  }
}

 

 

 

 

전체 예시

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

/* Custom base styles */
@layer base {
  body {
    font-family: 'Inter', sans-serif;
    background-color: #f7fafc;
    color: #2d3748;
  }

  h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
  }
}

/* Custom components */
@layer components {
  .btn {
    @apply px-4 py-2 bg-blue-500 text-white rounded-md;
  }

  .card {
    @apply p-4 shadow-md rounded-lg bg-white;
  }
}

/* Custom utilities */
@layer utilities {
  .bg-brand {
    background-color: #3490dc;
  }

  .text-brand {
    color: #3490dc;
  }

  .border-brand {
    border-color: #3490dc;
  }
}

 

 

이 예시에서 기본 스타일, 컴포넌트 스타일, 유틸리티 스타일을 각각의 레이어에 정의하여 Tailwind CSS의 구조적인 접근 방식을 보여줍니다. 이를 통해 스타일을 보다 체계적으로 관리하고 재사용성을 높일 수 있습니다.