목차

Tailwind CSS 동적 클래스 미작동

작성자 : Tony.tsx 윤장호

문제

const textColor = computed(() => { 
	*return* isActive ? 'text-white' : `text-${defaultColor[key]}-1` 
}) 

위와 같이 동적으로 Tailwind CSS에 클래스를 부여할 경우 반영이 되지 않는 문제가 생김

원인

• Tailwind CSS가 내부적으로 클래스를 정의하는 방식에 의해 발생
• Tailwind CSS는 코드가 컴파일 되는 시점에 프로젝트에서 사용하고 있는 클래스만 정의하고 나머지 클래스를 삭제하여 성능을 향상시키는 방식을 사용
• 이러한 특성 때문에 컴파일 이후 결정되는 동적 클래스로 스타일을 정의할 경우 해당 내용이 정의되지 않아 스타일이 적용되지 않음

해결

• tailwind.config.js 파일에 safelist: [ 'bg-gray-1', ... ] 와 같이 safelist를 추가하여 코드 컴파일 단계에서 코드가 사용되지 않았더라도 특정 클래스를 정의하도록 하여 해결

하위 컴포넌트에서 모달 표시 오류

작성자 : Tony.tsx 윤장호

문제