작성자: 준우

여러 타이포그래피 사용시 우선순위로 인한 문제 발견 (반응형 style이 적용되지 않음)

이로 인한 해결 방안 2가지

[1] Tailwind 기본 유틸리티 방식(사용 권장 방식) Ex) text-[00rem] font-medium md:text-[00rem] md:font-bold -> 커스텀 클래스 없이 Tailwind 유틸리티만으로 커버가능 -> 타이포그래피로 설정한 코드를 한 번만 사용가능

[2] 커스텀 클래스에도 반응형 스타일 적용 Ex) 아래와 같이 md,lg 에 대한 반응형 클래시를 명시적으로 추가해야 함

@layer utilities {
.txt-11-medium {
font-size: 1.1rem;
font-weight: 500;
}
@media (min-width: 768px) {
.md\\:txt-20-bold {
font-size: 2rem;
font-weight: 700;
}
}
}

-> purge 대상에 들어가지 않음 -> 최종 css에 안 쓰는 스타일까지 포함될 가능성이 있음 -> 용량이 커짐

결론: 유지보수 측면에서는 [1] 방법을 권장, 하지만 global.css에 작성한 내용만으로 코드 작성 불가