Tailwind CSS v4 고급 — 커스텀 유틸리티와 플러그인

@utility 디렉티브

@import "tailwindcss";

@utility scrollbar-hidden {
  scrollbar-width: none;
  &::-webkit-scrollbar { display: none; }
}

@utility glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

커스텀 변형

@variant hocus (&:hover, &:focus);
@variant scrolled (.scrolled &);

/* 사용: hocus:text-blue-500 */

함수형 유틸리티

@utility fluid-* {
  font-size: clamp(1rem, calc(0.5rem + value(--modifier) * 0.5vw), 3rem);
}