2nd/10_Wiki/Topics/AI_and_ML/유틸리티 퍼스트(Utility-first).md

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

id	title	category	status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	verification_status	tags	raw_sources	last_reinforced	github_commit	tech_stack
wiki-2026-0508-유틸리티-퍼스트-utility-first	유틸리티 퍼스트(Utility-first)	10_Wiki/Topics	verified	self	Utility-first CSS Tailwind Atomic CSS	none	A	0.9	applied	css tailwind utility-first frontend styling		2026-05-10	pending	language framework CSS Tailwind/UnoCSS

유틸리티 퍼스트(Utility-first)

매 한 줄

"매 single-purpose utility class 의 의 의 의 의 — 의 stylesheet 의 의 의 markup 의 의 styling locality.". Tailwind CSS (2017, Adam Wathan) 의 의 의 의 popularize, 매 2026 의 Tailwind v4 (Oxide engine, Rust-based, 100x faster) + UnoCSS (engine-agnostic, on-demand) 의 의. 매 atomic CSS 의 의 의 component 의 의 (의 React component) 의 의 의 의 reusability 의 의 의 의.

매 핵심

매 utility-first 의 의

• Locality: style 의 의 markup 의 — 의 stylesheet 의 의 의 jump 의.
• No naming: BEM .card__header--featured 의 의 의 의.
• Constraint-based: design token (spacing scale, color palette) 의 의 enforced.
• Tree-shakable: 의 사용된 utility 의 의 ship — 의 small bundle.
• Refactor-friendly: 의 selector specificity 의 의 — 의 confidence 의 change.

매 Tailwind v4 (2025-2026)

• Oxide engine: Rust 의 rewrite — 100x faster, 의 PostCSS plugin 의 의.
• CSS-first config: @theme directive — 의 tailwind.config.js 의 의.
• Auto content detection: 의 content: [] config 의 의.
• Native CSS variable: bg-blue-500 → --color-blue-500 의 의 직접 사용 의.
• Container queries: @container first-class.

매 응용

1. SPA / dashboard — rapid iteration.
2. Component library — Radix + Tailwind (shadcn/ui pattern).
3. Email HTML — limited CSS support 의 의 utility 의 의 의 의 의.
4. Static site — Astro + Tailwind.

💻 패턴

Tailwind v4 setup (CSS-first)

/* app.css */
@import "tailwindcss";

@theme {
  --color-brand: oklch(0.7 0.15 250);
  --font-display: "Inter", sans-serif;
  --breakpoint-3xl: 1920px;
}

/* 매 의 더 ㅣ tailwind.config.js 의 의 */

Component composition (React + Tailwind)

import { cva, type VariantProps } from 'class-variance-authority';
import { twMerge } from 'tailwind-merge';

const button = cva(
  'inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 disabled:opacity-50',
  {
    variants: {
      intent: {
        primary: 'bg-brand text-white hover:bg-brand/90',
        secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300',
        ghost: 'hover:bg-gray-100',
      },
      size: {
        sm: 'h-8 px-3 text-sm',
        md: 'h-10 px-4',
        lg: 'h-12 px-6 text-lg',
      },
    },
    defaultVariants: { intent: 'primary', size: 'md' },
  }
);

type Props = React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof button>;

export function Button({ className, intent, size, ...props }: Props) {
  return <button className={twMerge(button({ intent, size }), className)} {...props} />;
}

Responsive + dark mode

<div class="
  flex flex-col gap-4 p-4
  md:flex-row md:gap-6 md:p-6
  lg:gap-8 lg:p-8
  bg-white dark:bg-gray-900
  text-gray-900 dark:text-gray-100
">
  ...
</div>

Container queries (Tailwind v4)

<div class="@container">
  <div class="grid grid-cols-1 @md:grid-cols-2 @xl:grid-cols-4 gap-4">
    <Card />  <!-- 의 viewport 의 의, container 의 의 -->
  </div>
</div>

Custom utility (CSS-first)

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

/* 매 사용 */
/* <div class="scrollbar-hidden overflow-x-scroll"> */

Arbitrary value (escape hatch)

<!-- 매 design token 의 의 의 의 — arbitrary -->
<div class="top-[117px] grid-cols-[1fr_2fr_1fr] bg-[oklch(0.7_0.15_250)]">

cn helper (clsx + twMerge)

import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

// 매 사용 — 의 conflicting class 의 의 right-most 의 win
<div className={cn('p-4 bg-red-500', isActive && 'bg-blue-500', className)} />

UnoCSS alternative

// uno.config.ts
import { defineConfig, presetUno, presetAttributify } from 'unocss';

export default defineConfig({
  presets: [presetUno(), presetAttributify()],
  shortcuts: {
    'btn': 'inline-flex items-center px-4 py-2 rounded',
    'btn-primary': 'btn bg-blue-500 text-white hover:bg-blue-600',
  },
});

매 결정 기준

상황	Approach
New project	Tailwind v4 (Oxide) + cva + tailwind-merge
Performance-critical	UnoCSS (on-demand, smaller runtime)
Design system 의 의 한	Tailwind 의 의 — 의 design system 의 raw CSS or vanilla-extract
Email HTML	Tailwind email plugin (의 inline 의 의)
Astro / static	Tailwind + content-collections
Existing CSS-in-JS app	Migrate gradually — 의 새 component 의 Tailwind

기본값: Tailwind v4 + cva + cn helper + shadcn/ui 의 component layer.

🔗 Graph

• 변형: Tailwind_CSS · Atomic_CSS
• 응용: shadcn_ui · Design_System · Component_Library
• Adjacent: CSS_in_JS · CSS_Modules · CVA

🤖 LLM 활용

언제: utility class lookup, component refactor, responsive variant 추가, dark mode setup. 언제 X: visual design judgement (의 designer 의 의), pixel-perfect Figma 의 의 (의 visual review 의 의).

❌ 안티패턴

• @apply 의 abuse: 매 utility 의 의 의 component class 의 — 의 utility-first 의 의 의 lose.
• Long class string 의 의 abstraction 의 X: 50+ class 의 의 → cva variant 의 의.
• Arbitrary value 의 의: 의 top-[117px] 의 의 → design token 추가.
• Dynamic class 의 string interpolation: bg-${color}-500 — 의 tree-shake 의 의 (full class name 의 의 string 의 의).
• Mixing CSS-in-JS + Tailwind: 의 specificity war — 의 의 의 의.

🧪 검증 / 중복

• Verified (Tailwind v4 docs, Adam Wathan blog, UnoCSS docs, shadcn/ui).
• 신뢰도 A.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — utility-first CSS + Tailwind v4