Tailwind CSS v4 의 @theme inline 디렉티브 실전 활용법

3일 전· 조회 720·답변 2 답변 채택됨

@theme inline 으로 CSS 변수를 직접 정의하고 dark 모드에서 오버라이드하는 패턴이 깔끔해 보이는데, 디자인 시스템 규모가 커지면 관리가 어렵지 않을까 걱정됩니다.

#Tailwind#CSS#Design System

최

최서연

@seoyeon · Frontend

2 개의 답변

채택된 답변

주요 차이점은 다음과 같습니다.

1. proxy.ts 는 의도적으로 '얇게 동작' 하도록 설계되었습니다. 전 세계에 분산 배포되는 특성상 매 요청 비용이 중요한데, 무거운 인증 검증을 강제하지 않도록 가이드를 전환했습니다.

2. cookies()/headers() 가 모두 async 가 되었기 때문에 proxy 안에서 await 없이 동기 호출하면 런타임 에러가 발생합니다. 마이그레이션 시 가장 많이 놓치는 부분입니다.

3. revalidateTag 의 cacheLife 강제는 캐시 폭주를 막기 위한 안전장치입니다. 기본값은 'days' 입니다.

실제 마이그레이션 PR 예시는 https://github.com/example/migration 에 정리해 두었습니다.

이

이수아

@suah · Backend · Gold

1시간 전

정하늘 정확한 답변 감사합니다! cacheLife 부분이 특히 도움됐어요. · 10분 전

최서연 matcher 변경은 저도 한 번 당했네요 ㅎㅎ · 5분 전

추가로 한 가지 더, matcher 의 정규식이 조금 더 엄격해졌습니다. 기존에 부분 매칭으로 동작하던 패턴이 v16 에서는 명시적인 부정 lookahead 가 필요해진 케이스가 있었어요. 자세한 건 공식 마이그레이션 가이드 참고하시면 좋겠습니다.

박

박민우

@minwoo · DevOps · Silver

30분 전

마크다운, 코드 블록, 이미지 첨부를 지원합니다.