6. Tailwind CSS 커스텀 스타일과 관련 지시어 및 함수

임의의 값(Arbitrary values) 사용

Tailwind의 대괄호 표기법을 사용하여 임의의 값으로 즉석에서 클래스를 생성할 수 있습니다. 배경색, 글꼴 크기, 의사 요소 콘텐츠 등을 포함하여 프레임워크의 모든 유틸리티 클래스에 적용할 수 있습니다.

<!-- 임의 속성값(Arbitrary properties) 사용 -->
<div  class="top-[117px] lg:top-[344px]">  <!-- ... -->  </div>
<div class="bg-[#bada55] text-[22px] before:content-['Festivus']">  <!-- ... -->  </div>

<!-- 테마 내용 사용 -->
<div class="grid grid-cols-[fit-content(theme(spacing.32))]">  <!-- ... -->  </div>

<!-- css 변수 사용 -->
<div class="bg-[--my-color]">  <!-- ... -->  </div>

<!-- 기본 유틸리티가 포함되어 있지 않은 CSS 속성을 대괄호 표기법을 사용하여 완전히 임의의 CSS 사용 -->
<div class="[mask-type:luminance] hover:[mask-type:alpha]">  <!-- ... -->  </div>

<!-- 임의 변형값(Arbitrary variants) 사용 -->
<ul role="list">
  {#each items as item}
    <li class="lg:[&:nth-child(3)]:hover:underline">{item}</li>
  {/each}
</ul>

<!-- 임의의 값에 공백이 포함되어야 하는 경우 밑줄(_)친 사용, 빌드 시 자동으로 공백으로 변환합니다. -->
<div class="grid grid-cols-[1fr_500px_2fr]">  <!-- ... -->  </div>
<div class="bg-[url('/what_a_rush.png')]">  <!-- ... -->  </div>

<!-- 백슬래시를 사용하여 밑줄을 이스케이프 처리하면 Tailwind에서 이를 공백으로 변환하지 않습니다. -->
<div class="before:content-['hello\_world']">  <!-- ... -->  </div>

<!-- 백슬래시('\')가 렌더링된 HTML 에서 제거되는 JSX 와 같은 것을 사용하는 경우 String.raw()를 사용하여 백슬래시('\')가 JavaScript 이스케이프 문자로 처리되지 않도록 할 수 있습니다. -->
<div className={String.raw`before:content-['hello\_world']`}> <!-- ... --> </div>

<!-- Tailwind의 많이 사용하는 유틸리티 공통 네임스페이스기준으로 임의의 값을 붙여 바로 사용 가능합니다. -->
<!-- 글꼴 크기 유틸리티를 생성 -->
<div class="text-[22px]">...</div>

<!-- 색상 유틸리티를 생성 -->
<div class="text-[#bada55]">...</div>

임의의 값 모호함 해결(Resolving ambiguities)

Tailwind의 많은 유틸리티는 text-lg 와 text-black 와 같이 text- 네임스페이스를 공유하지만 하나는 글꼴 크기용이고 다른 하나는 색상용으로 구분되어 사용됩니다.

임의의 값을 사용하는 경우 Tailwind는 일반적으로 전달한 값에 따라 이 모호성을 자동으로 처리하지만 CSS 변수를 사용하는 경우 모호한 경우가 생길 수 있습니다.

이 때 CSS 변수 앞에 CSS 데이터 유형(CSS data type) 을 추가하여 Tailwind에 어떤 CSS 속성을 대략적으로 명시해 힌트를 줄 수 있습니다.

<!-- ⚠ 공통 네임스페이스 다음에 CSS 변수를 사용 (Tailwind 가 어떤 CSS 속성을 사용할지 모호할 수 있음) -->
<div class="text-[var(--my-var)]">...</div>

<!-- ✔ CSS 변수 앞에 CSS 데이터 유형을 추가해 사용 (Tailwind에 어떤 CSS 속성을 사용할지 대략적으로 명시)   -->
<div class="text-[length:var(--my-var)]">...</div>

사용자 정의 스타일 적용

Tailwind는 CSS 를 스타일시트에 추가해 간단하게 사용자 정의 CSS 를 구현 할 수 있습니다 또한 @layer 지시어를 사용하여 Tailwind의 base, components, utilities 레이어에 스타일을 추가할 수도 있습니다.

/* main.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

/* 직접적으로 스타일 추가 */
.my-custom-style { /* ... */ }

/* @layer 지시어를 사용하여 Tailwind 의 `components` 레이어에 스타일을 추가 **/
@layer components  {
  .my-custom-style  {  /* ... */  }  
}

base 스타일 추가 및 재정의

특정 HTML 요소에 대한 기본 스타일을 추가하려면 @layer 지시문을 사용하여 해당 스타일을 Tailwind의 base 레이어에 @apply 지시어를 사용하여 추가 할 수 있습니다.

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
  /* ... */
}

components 스타일 추가 및 재정의

Tailwind의 components 레이어에 기존 클래스를 재정의 및 프로젝트에 추가하고 싶은 더 복잡한 클래스를 utility classes 로 새로 추가할 수 있습니다.

※ Tailwind 는 이러한 복잡한 유형의 클래스 사용을 권장하지는 않고 낮은 수준의 유틸리티 클래스만 사용하여 디자인을 구현하는 유틸리티 우선 워크플로를 권장합니다. 자세히

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

@layer components {
  .card {
    background-color: theme('colors.white');
    border-radius: theme('borderRadius.lg');
    padding: theme('spacing.6');
    box-shadow: theme('boxShadow.xl');
  }
  /* ... */
}

utilities 스타일 추가 및 재정의

Tailwind의 utilities 레이어에 기존 클래스(ex: card, btn, badge)를 재정의 및 보다 복잡한 사용자 정의 클래스를 새로 추가할 수 있습니다.

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

@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
}

사용자 정의 CSS 최적화

base, components, utilities 레이어에 추가하는 모든 사용자 정의 스타일은 해당 스타일이 실제로 HTML에서 사용되는 경우에만 컴파일된 CSS에 포함됩니다.

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

/* 실제로 사용하지 않는 한 컴파일된 CSS에 포함되지 않습니다. */
@layer components {
  .card {
    /* ... */
  }
}

※ 만약 항상 사용자 정의 CSS를 추가하려면 @layer 지시문을 사용하지 않고 스타일시트에 추가하여 사용할 수 있습니다.

@tailwind base;
@tailwind components;

/* 레이어에 추가하지 않고 직접 스타일을 작성하는 경우 컴파일된 CSS 에 항상 포함됩니다. */
.card {
  /* ... */
}

/* 선언 위치에 따라 오버라이드됨 */
@tailwind utilities;

CSS관련 지시문 및 함수 정리

@tailwind

@tailwind 지시문을 사용하여 Tailwind의 base, components, utilities, variants 스타일을 CSS에 추가할 수 있습니다.

/* Tailwind의 기본 스타일과 플러그인에 등록된 모든 기본 스타일을 삽입합니다. */
@tailwind base;

/* Tailwind의 `components` 클래스와 플러그인에 등록된 모든 `components` 클래스를 삽입합니다. */
@tailwind components;

/** Tailwind의 유틸리티 클래스와 플러그인에 등록된 모든 유틸리티 클래스를 삽입합니다. */
@tailwind utilities;

/**
 * Tailwind가 hover, focus, responsive, dark mode 및 각 클래스의 기타 variants 을 삽입하는 위치, 구조, 우선순위등등을 제어하려면 이 지시어를 사용할 수 있습니다.
 * 생략하면 Tailwind는 기본적으로 이러한 클래스를 스타일시트 맨 끝에 추가합니다.
 */
@tailwind variants;

@layer

@layer 지시문을 사용하여 사용자 정의 스타일 세트들을 Tailwind에 등록합니다. 유효한 레이어 종류는 base, components, utilities 입니다.

layer 에 추가된 모든 맞춤 CSS는 기본적으로 Tailwind에 내장된 모든 클래스와 마찬가지로 해당 CSS가 HTML에서 실제로 사용되는 경우에만 최종 빌드에 포함됩니다.

@layer로 사용자 정의 CSS를 래핑하면 hover: 및 focus:와 같은 규칙이 있는 수정자를 사용하거나 md: 및 lg:와 같은 반응형 수정자와 같이 사용할 수 있습니다.

@apply

@apply를 지시자를 활용해서 기존 utility클래스를 사용자 정의 CSS에서 사용할 수 있습니다.

Tailwind의 유틸리티를 의도한 대로 마크업에서 직접 사용하고, @apply 기능을 남용하지 않는 것을 더 추천하고 있다.

.select2-dropdown {
  @apply rounded-b-lg shadow-md;
}

.select2-search {
  @apply border border-gray-300 rounded;
}

.select2-results__group {
  @apply text-lg font-bold text-gray-900;
}

※ @apply가 인라인된 모든 규칙에는 특이성 문제를 방지하기 위해 기본적으로 !important가 제거됩니다. !important를 사용하기 위해서는 선언 끝에 !important를 추가하여 사용해야 합니다.

/* css 속성에 바로 !important 사용 예시  */
.foo { color: blue !important; }
.bar { @apply foo; }

/* 실제 적용 스타일 예시 : !important 내용 제거되서 적용 */
.foo { color: blue !important; }
.bar { color: blue; }

/* @apply 선언시 !important 사용 예시 */
.btn {
  @apply font-bold py-2 px-4 rounded !important;
}

/* 실제 적용 스타일 예시 : !important 적용 */
.btn {
  font-weight: 700 !important;
  padding-top: .5rem !important;
  padding-bottom: .5rem !important;
  padding-right: 1rem !important;
  padding-left: 1rem !important;
  border-radius: .25rem !important;
}

@config

해당 CSS 파일을 컴파일할 때 Tailwind가 사용해야 하는 구성 파일을 지정하기 위해 @config 지시어를 사용합니다.

/* admin.css */

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

@tailwind base;
@tailwind components;
@tailwind utilities;

theme()

theme() 함수에서 점 표기법을 사용 Tailwind config 값에 액세스할 수 있습니다,

.content-area  {  height:  calc(100vh  -  theme(spacing.12));  }

/* '.'을 포함하는 값에 접근할 때는 대괄호에 감싸서 활용해야함 */
.content-area  {  height:  calc(100vh  -  theme(spacing[2.5]));  }

Tailwind는 중첩된 객체 구문을 사용하여 스타일을 생성하므로 중첩된 스타일에 액세스하려면 점 표기법을 사용해야 합니다.

/* ❌ 대시 구문을 사용하여 접근 불가*/
.btn-blue { background-color: theme(colors.blue-500); }

/*  ✔ 점 표기법을 사용하여 접근 가능 */
.btn-blue { background-color: theme(colors.blue.500); }

screen()

screen 함수를 사용하면 breakpoint 를 이름으로 참조하는 미디어 쿼리를 생성할 수 있습니다.

@media screen(sm)  {  /* ... */  }

/* 빌드 후 실제 적용 예시 */
@media (min-width: 640px)  {  /* ... */  }

---

참고

https://tailwindcss.com/docs/adding-custom-styles
https://tailwindcss.com/docs/functions-and-directives