기술노트

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 처리.

Core Web Vitals의 INP(Interaction to Next Paint)를 200ms 아래로 끌어내리는 실전 기법 + Speculation Rules로 페이지 전환 0초.

Tailwind v4의 CSS-first config, Container Query, @starting-style 등 신기능을 실제 디자인 시스템에 통합하는 패턴.

Web Components는 프레임워크 독립적인 브라우저 표준 UI 컴포넌트다. Custom Elements·Shadow DOM·Slot·Form Internals로 실전 컴포넌트를 만드는 법을 정리한다.