기술노트

content 경로 누락, 동적 클래스 문자열 조합, 빌드 캐시. Tailwind가 클래스를 못 찾아 purge하는 흔한 원인들.

z-index 9999를 줘도 안 올라오는 건 부모가 만든 쌓임 맥락(stacking context)에 갇혀서다. transform·opacity·position이 맥락을 만든다.

flex 자식 안의 긴 텍스트나 그리드가 부모를 넘쳐 가로 스크롤이 생기는 건 flex item의 min-width 기본값이 auto라서다. min-width:0 한 줄로 해결.

Tailwind v5의 핵심 변화 5가지 — @theme 분리, container query 코어, dark variant 재설계, JIT 캐시, plugin API.

제로 런타임 CSS-in-JS·atomic CSS 세 후보를 동일 디자인 시스템으로 비교. DX, 빌드 시간, 번들, IDE 경험.

Rust 기반 파서·트랜스포머로 PostCSS 대비 100배. browserslist 트랜스파일, CSS 모듈, 플러그인 마이그레이션 가이드.

Tailwind v4, UnoCSS, Panda CSS 세 프레임워크의 빌드 시간·번들 크기·DX 실측 비교와 팀 규모별 선택 기준.

Tailwind v4 Oxide(Rust) 엔진 실측. 대형 프로젝트 빌드 4.8배·증분 11배 가속. CSS-first config 전환 함정과 v3 호환 한계.

CSS 캐스케이드를 재설계하는 3가지 신기능(@scope·@layer·native nesting). 우선순위, BEM/Tailwind와의 공존, 실전 패턴.

2026년 표준이 된 Container Queries 실전 가이드. 컴포넌트가 위치에 따라 다르게 보이는 진정한 반응형 패턴.

CSS의 모던 레이아웃 도구들 — Container Queries (반응형 재정의), Subgrid (자식 grid 정렬), Anchor positioning (절대 위치 혁명). 모두 표준화 완료.

View Transitions API로 SPA·MPA 페이지 전환을 자연스럽게 만드는 실전 — Next.js 16 통합, hero 이미지 트랜지션, fallback 처리.