Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 11 additions & 1 deletion frontend/src/lib/utils.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,16 @@
import { clsx } from 'clsx'
import type { ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'
import { extendTailwindMerge } from 'tailwind-merge'

// styles.css @theme 의 커스텀 font-size 토큰. 기본 tailwind-merge 는 값이 없는 text-*
// 를 색상으로 보고, cn() 에서 text-foreground 같은 색상과 함께 쓰면 폰트 크기 토큰을
// 충돌로 지워 버린다(→ 상속 크기로 부풂). font-size 그룹에 명시 등록해 병합에서 살린다.
// styles.css 의 --text-* 목록과 동기화해야 한다.
const twMerge = extendTailwindMerge({
extend: {
classGroups: { 'font-size': [{ text: ['caption', 'label', 'body'] }] },
},
})

export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
Expand Down
Loading