함수와 지시문

지시문(Directives)

지시문은 Tailwind CSS 프로젝트에서 특별한 기능을 제공하는 커스텀 Tailwind 전용 at-규칙입니다.

@import

@import 지시문을 사용하여 Tailwind 자체를 포함한 CSS 파일을 인라인으로 가져올 수 있습니다:

@import "tailwindcss";

@theme

@theme 지시문을 사용하여 폰트, 색상, 브레이크포인트와 같은 프로젝트의 커스텀 디자인 토큰을 정의할 수 있습니다:

@theme {  --font-display: "Satoshi", "sans-serif";  --breakpoint-3xl: 1920px;  --color-avocado-100: oklch(0.99 0 0);  --color-avocado-200: oklch(0.98 0.04 113.22);  --color-avocado-300: oklch(0.94 0.11 115.03);  --color-avocado-400: oklch(0.92 0.19 114.08);  --color-avocado-500: oklch(0.84 0.18 117.33);  --color-avocado-600: oklch(0.53 0.12 118.34);  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);  /* ... */}

테마 변수에 대해 더 알아보려면 테마 변수 문서를 참고하세요.

@source

@source 지시문을 사용하여 Tailwind의 자동 콘텐츠 감지에서 누락된 소스 파일을 명시적으로 지정할 수 있습니다:

@source "../node_modules/@my-company/ui-lib";

소스 파일에서 클래스를 감지하는 방법에 대해 더 알아보려면 소스 파일에서 클래스 감지 문서를 참고하세요.

@utility

@utility 지시문을 사용하여 hover, focus, lg와 같은 변형과 함께 작동하는 커스텀 유틸리티를 프로젝트에 추가할 수 있습니다:

@utility tab-4 {  tab-size: 4;}

커스텀 유틸리티를 등록하는 방법에 대해 더 알아보려면 커스텀 유틸리티 추가 문서를 참고하세요.

@variant

@variant 지시문을 사용하여 CSS의 스타일에 Tailwind 변형을 적용할 수 있습니다:

.my-element {  background: white;  @variant dark {    background: black;  }}

여러 변형을 동시에 적용해야 하는 경우 중첩을 사용하세요:

@variant dark {  @variant hover {    background: black;  }}

변형에 대해 더 알아보려면 hover, focus 및 기타 상태 문서를 참고하세요.

@custom-variant

@custom-variant 지시문을 사용하여 프로젝트에 커스텀 변형을 추가할 수 있습니다:

@custom-variant pointer-coarse (@media (pointer: coarse));@custom-variant theme-midnight (&:where([data-theme="midnight"] *));

이를 통해 pointer-coarse:size-48 및 theme-midnight:bg-slate-900과 같은 유틸리티를 작성할 수 있습니다.

커스텀 변형을 추가하는 방법에 대해 더 알아보려면 커스텀 변형 추가 문서를 참고하세요.

@apply

@apply 지시문을 사용하여 기존 유틸리티 클래스를 커스텀 CSS에 인라인으로 적용할 수 있습니다:

.select2-dropdown {  @apply rounded-b-lg shadow-md;}.select2-search {  @apply rounded border border-gray-300;}.select2-results__group {  @apply text-lg font-bold text-gray-900;}

이는 서드파티 라이브러리의 스타일을 재정의하는 등 커스텀 CSS를 작성해야 하지만, 여전히 디자인 토큰을 사용하고 HTML에서 사용하는 것과 동일한 구문을 사용하고 싶을 때 유용합니다.

@reference

Vue 또는 Svelte 컴포넌트의 <style> 블록이나 CSS 모듈 내에서 @apply 또는 @variant를 사용하려면, 해당 컨텍스트에서 값을 사용할 수 있도록 테마 구성을 가져와야 합니다.

CSS 출력에서 CSS 변수를 중복하지 않고 이를 수행하려면, 테마를 가져올 때 @import 대신 @reference 지시문을 사용하세요:

<template>  <h1>Hello world!</h1></template><style>  @reference "../../my-theme.css";  h1 {    @apply text-2xl font-bold text-red-500;  }</style>

기본 테마를 사용하는 경우 tailwindcss/theme를 직접 가져올 수 있습니다:

<template>  <h1>Hello world!</h1></template><style>  @reference "tailwindcss/theme";  h1 {    @apply text-2xl font-bold text-red-500;  }</style>

함수

Tailwind는 색상과 간격 스케일 작업을 더 쉽게 하기 위해 다음과 같은 빌드 타임 함수를 제공합니다.

--alpha()

--alpha() 함수를 사용하여 불투명도가 적용된 색상을 생성할 수 있습니다:

.my-element {  color: --alpha(var(--color-lime-300) / 50%);}

--spacing()

--spacing() 함수를 사용하여 테마를 기반으로 간격 값을 생성할 수 있습니다:

.my-element {  margin: --spacing(4);}

호환성

다음 지시문과 함수는 Tailwind CSS v3.x와의 호환성을 위해 제공됩니다.

@config

@config 지시문을 사용하여 레거시 JavaScript 기반 설정 파일을 불러올 수 있습니다:

@config "../../tailwind.config.js";

JavaScript 기반 설정에서 corePlugins, safelist, separator 옵션은 v4.0에서 지원되지 않습니다.

@plugin

@plugin 지시문을 사용하여 레거시 JavaScript 기반 플러그인을 불러올 수 있습니다:

@plugin "@tailwindcss/typography";

@plugin 지시문은 패키지 이름이나 로컬 경로를 인자로 받습니다.

theme()

theme() 함수를 사용하여 점 표기법으로 Tailwind 테마 값을 참조할 수 있습니다:

.my-element {  margin: theme(spacing.12);}

이 함수는 더 이상 권장되지 않으며, 대신 테마 변수를 참조하는 것을 추천합니다.