Tailwind CSS 를 사용하던 중 처음으로 문제가 생겼습니다.
문제 발생
로그인 화면 아래 MenuBar 의 backgroundcolor를 두 가지 이상 써야할 것 같아서, props로 전달 받아서 사용하려고 했습니다.
이런식으로 말입니다.
그래서 tailwind.config.js 에 colors에 특정 색상들을 추가했습니다.
예를 들어, customOrange 와 customRed를 다음과 같이 추가했다고 해봅시다.
문제는, props에 customOrange나 customRed 를 아무리 전달해도 적용이 되지 않았습니다.
처음에는 tailwind.config.js가 바로 업데이트 되지 않는줄 알았습니다.
그런데 테스트를 계속해서 하던 도중 특이사항을 발견했는데,
위 사진과 같이 a태그에 text-customRed는 적용이 되는 반면
MenuBar에 props로 전달한 customRed만 적용이 되지 않는다는 것이였습니다.
원인 분석
원인은 크게 다음 세가지가 있습니다.
- TailwindCSS의 정적 클래스 분석과 PurgeCSS의 동작
-
TailwindCSS는 클래스 이름을 정적으로 분석하여 사용된 클래스만 최종 CSS에 포함합니다.
-
동적으로 생성된 클래스(예:
bg-${color})는 Tailwind의 정적 분석을 통과하지 못하므로 최종 CSS에서 누락될 가능성이 있습니다.
- a 태그에서는 text-customRed가 작동하지만, MenuBar에서는 props로 전달한 bg-customRed가 적용되지 않는 이유
-
a태그의text-customRed는 코드에 명시적으로 작성된 정적 클래스이므로 Tailwind가 이를 인식하고 빌드 과정에서 유지합니다. -
반면,
MenuBar컴포넌트에서 동적으로 생성된bg-${color}클래스는 Tailwind의 정적 분석 대상이 아니므로 최종 CSS에서 제거될 수 있습니다.
- PurgeCSS와 동적 클래스의 충돌
-
PurgeCSS는 템플릿 리터럴이나 변수로 생성된 클래스 이름을 파악하지 못합니다.
-
props로 전달된color값이 Tailwind가 미리 알 수 없는 형태로 작성되었기 때문에, PurgeCSS가 해당 클래스를 사용되지 않은 것으로 간주하고 제거했을 가능성이 높습니다.
즉, 결론은,
정적 분석에서 props로 전달된 동적 클래스는 인식되지 않아 PurgeCSS에 의해 제거되었고, 코드에 명시적으로 작성된 정적 클래스(text-customRed)는 제거되지 않고 정상적으로 작동했습니다.
문제 해결
결론적으로, SafeList 설정을 통해 문제를 해결했습니다.
Safelist는 동적 클래스 이름이 빌드 과정에서 제거되지 않도록 미리 예약하는 방법입니다.
다음과 같이 bg-customRed 클래스를 safelist 설정에 추가합니다.
module.exports = {
content: ['./src/**/*.{html,js}'],
safelist: [
{
pattern: 'bg-customRed', // 모든 bg-로 시작하는 클래스
},
],
};혹은 모든 배경색 클래스(bg-*)를 포함하려면 아래처럼 설정할 수 있습니다.
module.exports = {
content: ['./src/**/*.{html,js}'],
safelist: [
{
pattern: /bg-.*/, // 모든 bg-로 시작하는 클래스
},
],
};
적용이 잘 되는 모습을 볼 수 있습니다.
