Files

T

Antigravity Agent 9148c358d0 docs(10_Wiki): 위키 전체 재구성 — Topic_* 폴더를 4개 카테고리로 통합 + 대규모 중복 제거

Topic_Agent/Topic_Blog/Topics/Topics_Biz/Topics_Meeting/Topics_Rag의 마크다운 지식 문서를
Topic_General/Topic_Programming/Topic_Graphic/Topic_Business 4개 카테고리로 재분류.

- 중복 제거: frontmatter의 status:duplicate/merged + duplicate_of/redirect_to 필드로
  자기 자신을 중복으로 선언한 리다이렉트 stub 1032개 제거, 완전 동일 내용 파일 472개 제거,
  동일 파일명·다른 내용 충돌 시 더 큰(완전한) 버전만 유지(162개 제거) — 총 1639개 중복 제거.
- 분류: 폴더 단위로 명확한 항목(AI_and_ML/Coding/Architecture 등 → Programming,
  Comfyui/Visual_Effects → Graphic, Topics_Biz/Topics_Meeting/사업 등 → Business,
  Poetic_Blog_Writing/창의성/Game_Design 등 → General)은 폴더 우선순위로,
  나머지 혼재 폴더(Topic_Agent/Topic_Blog/Topics 루트/Thinking & Reasoning/Other/UI_UX_Assets)는
  title/tags 키워드 스코어링으로 파일 단위 분류(불명확한 경우 General로 폴백).
  원본 폴더명은 "From_*" 서브폴더로 보존해 추적 가능성 유지.
- 최종 배치: Programming 2784 / General 1608 / Graphic 285 / Business 249 = 4926개 문서.
- 에이전트 운영 상태(.astra/.agent/.obsidian/sessions/memory/_company/docs/lessons/_shared/src)는
  지식 콘텐츠가 아니므로 재분류 대상에서 제외하고 원위치 유지.
- Topics/Topic_email(상위 보호 폴더 Topic_email과 파일명 100% 중복) 삭제 — 보호 폴더 자체는 미변경.
- 완전히 비게 된 Topic_Agent/Topic_Blog/Topics_Biz/Topics_Rag 폴더 제거.

2026-07-05 00:33:48 +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