2025.2.5 수요일의 공부기록
Tailwind CSS는 지시어(Directives)와 함수(Functions)를 통해 스타일링을 더 유연하고 강력하게 관리할 수 있도록 다양한 기능을 제공한다.
이번에는 @tailwind, @apply, @layer 등의 지시어를 활용하는 방법을 살펴본다.
지시어(Directives)란?
지시어(Directives)는 Tailwind CSS 프로젝트에 특별한 기능을 제공하는 커스텀 at-규칙이다.
이를 통해 Tailwind의 기본 스타일을 불러오거나, 유틸리티 클래스를 재사용하거나, 커스텀 스타일을 구성할 수 있다.
@tailwind 지시어
@tailwind 지시어는 Tailwind의 기본 스타일, 컴포넌트, 유틸리티 클래스 등을 CSS에 삽입하는 데 사용된다.
📌 주요 사용법
@tailwind base;
@tailwind components;
@tailwind utilities;✅ 사용 예제
styles.css:
@tailwind base;
@tailwind components;
@tailwind utilities;📌 설명:
@tailwind base: Tailwind의 기본 리셋 스타일(Normalize.css 등)을 삽입.@tailwind components: Tailwind의 컴포넌트 클래스(버튼, 폼 등)를 삽입.@tailwind utilities: Tailwind의 유틸리티 클래스(색상, 마진, 폰트 등)를 삽입.
@apply 지시어
@apply 지시어는 Tailwind의 기존 유틸리티 클래스를 사용자 정의 CSS에 인라인할 때 사용된다.
이를 통해 반복적인 스타일을 재사용하고, 가독성 높은 코드를 작성할 수 있다.
📌 주요 사용법
.클래스이름 {
@apply 유틸리티-클래스;
}✅ 예제 1: 버튼 스타일 재사용
/* styles.css */
.btn {
@apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}
.btn:hover {
@apply bg-blue-700;
}📌 설명:
.btn클래스는bg-blue-500,text-white,py-2,px-4,rounded등의 유틸리티 클래스를 재사용한다..btn:hover에서는 Hover 상태일 때bg-blue-700이 적용된다.
✅ 예제 2: 폼 입력 필드 스타일링
/* styles.css */
.input-field {
@apply border border-gray-300 p-2 rounded-md focus:ring-2 focus:ring-blue-500;
}📌 설명:
.input-field클래스는 기본 테두리 스타일(border-gray-300)과 포커스 상태의 강조 스타일(focus:ring-blue-500)을 재사용한다.
@layer 지시어
@layer 지시어는 사용자 정의 스타일이 속할 레이어(Base, Components, Utilities)를 정의하는 데 사용된다.
이를 통해 Tailwind의 스타일 우선순위와 정렬을 제어할 수 있다.
📌 주요 사용법
@layer base {
/* 기본 스타일 (리셋 스타일 등) */
}
@layer components {
/* 재사용 가능한 컴포넌트 스타일 */
}
@layer utilities {
/* 커스텀 유틸리티 클래스 */
}✅ 예제 1: 기본 스타일 정의 (base)
@layer base {
h1 {
@apply text-3xl font-bold text-gray-900;
}
body {
@apply bg-gray-100 text-gray-800;
}
}📌 설명:
@layer base는 Tailwind의 기본 스타일에 추가로 사용자 정의 스타일을 삽입한다.- 모든
h1태그에text-3xl,font-bold등의 스타일이 기본적으로 적용된다.
✅ 예제 2: 컴포넌트 스타일 정의 (components)
@layer components {
.card {
@apply bg-white shadow-md rounded-lg p-4;
}
.btn-primary {
@apply bg-blue-500 text-white font-semibold py-2 px-4 rounded;
}
}📌 설명:
@layer components는 재사용 가능한 컴포넌트 스타일을 정의하는 데 사용된다..card와.btn-primary는 각각 카드 컴포넌트와 버튼 스타일로 사용 가능.
✅ 예제 3: 유틸리티 클래스 추가 (utilities)
@layer utilities {
.content-auto {
content-visibility: auto;
}
.scroll-smooth {
scroll-behavior: smooth;
}
}📌 설명:
@layer utilities를 사용하면 Tailwind에 커스텀 유틸리티 클래스를 추가할 수 있다..content-auto와.scroll-smooth는 Tailwind의 기본 유틸리티처럼 사용할 수 있다.
Functions (Tailwind 함수)
Tailwind CSS는 CSS 내에서 함수를 사용하여 스타일을 동적으로 계산할 수 있다.
예를 들어 색상 함수를 활용하여 색상을 조합하거나 변형할 수 있다.
✅ 예제 1: theme() 함수 사용
theme() 함수는 Tailwind 설정 파일(tailwind.config.js)에 정의된 값을 참조할 때 사용된다.
.btn {
background-color: theme('colors.blue.500');
color: theme('colors.white');
padding: theme('spacing.4') theme('spacing.6');
}📌 설명:
theme('colors.blue.500')→ Tailwind 설정에서blue-500색상을 가져와 버튼 배경에 적용.theme('spacing.4')→ 설정된spacing값(1rem)을 가져와 패딩에 적용.
✅ 예제 2: calc() 함수와 유틸리티 클래스 혼합
.box {
width: calc(100% - theme('spacing.8'));
height: calc(50vh - theme('spacing.4'));
}📌 설명:
- 요소의 너비와 높이를 Tailwind의 간격 값과 CSS 계산 함수(
calc())를 결합해 동적으로 설정.
Tailwind CSS의 지시어와 함수를 활용하면 복잡한 스타일 관리를 체계적으로 수행할 수 있으며, 생산성과 유지보수성을 동시에 향상시킬 수 있다.
자세한 내용은 Tailwind CSS 공식 문서를 참고하자!
