Files

T

Antigravity Agent f8b21af4be Wiki cleanup: error-doc removal, dedup merge, link normalization

10_Wiki/Topics 대규모 정리:
- 오류 캡처/미완성 stub 문서 227개 제거
- 교차폴더 중복 43클러스터 병합 (63파일 → redirect)
- 링크명 정규화: 깨진 링크 수정·redirect 직결·개념 매핑 ~2,400건
- 카테고리 MOC 6개 신규 생성
- Graph 섹션 미해결 related-keyword 링크 10,058건 제거

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

2026-05-20 23:52:15 +09:00

5.6 KiB

Raw Blame History

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

title

Tailwind CSS v4

매 한 줄

"매 Tailwind v4 는 CSS-first 의 rebuild — JS config 의 retire, Lightning CSS engine, 5x faster build". 매 2025 Q1 stable release. 매 v3 의 tailwind.config.js → v4 의 @theme {} CSS-native. 매 modern CSS feature (cascade layers, container queries, color-mix, @starting-style) 의 first-class 의 support.

매 핵심

매 v4 의 break (vs v3)

JS config retired: tailwind.config.js → @theme directive in CSS.
PostCSS plugin → dedicated: @tailwindcss/postcss or Vite plugin (@tailwindcss/vite).
Lightning CSS engine: Rust-based, 5x faster, native vendor prefixing + nesting.
Single CSS import: @import "tailwindcss"; (replaces 3-line directives).
Auto content detection: heuristic-based, manual content: [...] 의 unnecessary in most cases.
CSS variables for everything: theme tokens 의 --color-blue-500 등 native CSS var.
Container queries: built-in @container utility.
3D transforms, color-mix(), @starting-style: modern CSS feature 의 utility.

매 install (2026)

# Vite
npm install tailwindcss @tailwindcss/vite
# PostCSS
npm install tailwindcss @tailwindcss/postcss
# CLI
npm install tailwindcss @tailwindcss/cli

매 응용

Next.js 15 / Remix / SvelteKit: Vite plugin 의 default.
Design system: @theme 의 token export → tailwind + native CSS 의 share.
Container query layout: 매 truly responsive component.

💻 패턴

1. CSS-first config (`app.css`)

@import "tailwindcss";

@theme {
  --color-brand-50:  oklch(97% 0.02 250);
  --color-brand-500: oklch(60% 0.18 250);
  --color-brand-900: oklch(20% 0.06 250);

  --font-display: "Inter Display", "ui-sans-serif", system-ui;

  --radius-lg: 14px;
  --spacing-section: 5rem;

  --breakpoint-3xl: 1920px;
}

/* Custom variants */
@custom-variant dark (&:where(.dark, .dark *));

2. Vite integration (`vite.config.ts`)

import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [tailwindcss()],
});

3. Container queries

<div class="@container">
  <article class="grid grid-cols-1 @md:grid-cols-2 @xl:grid-cols-3">
    <!-- responds to parent .@container, NOT viewport -->
  </article>
</div>

4. Dark mode (CSS-first)

/* app.css */
@variant dark (&:where(.dark, .dark *));

<html class="dark">
  <body class="bg-white dark:bg-zinc-950 text-zinc-900 dark:text-zinc-100">
    ...
  </body>
</html>

5. Arbitrary values + CSS vars

<!-- Direct theme token reference -->
<div class="bg-(--color-brand-500) text-(--color-brand-50)">...</div>

<!-- Arbitrary -->
<div class="grid-cols-[repeat(auto-fit,minmax(220px,1fr))]">...</div>

6. 3D transform utilities (v4 new)

<div class="perspective-distant">
  <div class="rotate-x-25 rotate-y-15 rotate-z-5 translate-z-10
              transform-3d hover:rotate-y-0 transition-transform duration-500">
    Card
  </div>
</div>

7. `@starting-style` (entry animation)

@layer components {
  .modal {
    @apply opacity-100 translate-y-0 transition-[opacity,translate] duration-300;
    @starting-style {
      opacity: 0;
      translate: 0 1rem;
    }
  }
}

8. Custom utility / component

@utility tab-* {
  tab-size: --value(integer);
}

@utility content-auto {
  content-visibility: auto;
}

/* usage: class="tab-4 content-auto" */

9. Migration from v3

# Official codemod
npx @tailwindcss/upgrade@latest

# checks: deprecated utility renames, config → @theme conversion,
# @tailwind base/components/utilities → @import "tailwindcss"

매 결정 기준

상황	Approach
New project (2026)	v4 직행
v3 → v4 migration	`@tailwindcss/upgrade` codemod
JS config 의 deeply nested logic	v3 유지 or 매 partial migration
Vite/Next 15+	`@tailwindcss/vite`
Legacy webpack	`@tailwindcss/postcss`

기본값: 매 new project 의 v4 + Vite plugin + @theme CSS-first config.

🔗 Graph

부모: Tailwind-CSS
변형: Container-Queries
응용: Next.js · Design-System · Component-Library
Adjacent: Lightning-CSS

🤖 LLM 활용

언제: utility class composition, migration codemod 의 explain, custom @utility 의 design. 언제 X: 매 visual judgment (color, spacing, hierarchy) 매 human eye 의 final.

❌ 안티패턴

v4 에서 v3 식 tailwind.config.js 의 keep: 매 partial work — 매 @theme 의 migrate.
@apply overuse: 매 utility 의 advantage 의 lose. 매 component 의 truly repeated 일 때만.
Manual content: [...] 의 v4 에서 의무화: 매 auto-detection 의 trust (special case 만 add).
@import "tailwindcss/utilities" 분리: v4 에서 single @import "tailwindcss"; 의 sufficient.
Hard-coded color hex 의 spam: 매 @theme token 의 사용.

🧪 검증 / 중복

Verified (Tailwind v4.0 release notes Jan 2025, official migration guide, Adam Wathan blog).
신뢰도 A.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — Tailwind v4 (CSS-first, Lightning CSS, modern features) full canonical

5.6 KiB Raw Blame History