Modal 스타일링 이슈와 해결 과정

🚨 문제 상황

 

Modal 컴포넌트에 Tailwind CSS로 스타일을 적용했을 때

의도한 대로 스타일이 적용되지 않는 현상이 발생했다.

// 적용이 잘 안되는 Tailwind 스타일
<div className="flex flex-col w-[585px] h-[300px] p-6">
  {/* 모달 내용 */}
</div>

 

 

하지만 같은 스타일을 인라인으로 적용했을 때는 정상적으로 작동했다.

// 정상 작동하는 인라인 스타일
<div style={{
  display: "flex",
  flexDirection: "column",
  width: "585px",
  height: "300px",
  padding: "24px"
}}>
  {/* 모달 내용 */}
</div>

 

🔍  원인 분석

 

1. JIT 컴파일러 이슈
   • Tailwind CSS의 JIT 컴파일러는 빌드 시점에 사용된 클래스만 생성함
   • 동적으로 생성되는 모달의 경우 컴파일 시점에 해당 스타일이 포함되지 않을 수 있음.
2. 스타일 적용 시점의 차이
   • 인라인 스타일: 런타임에 직접 DOM에 적용됨
   • Tailwind: 빌드 타임에 생성되어야 함

 

인라인 스타일이 적용되는 이유

 

    런타임 vs 컴파일타임

• 인라인 스타일: 런타임에 직접 적용됨
• Tailwind: 빌드 시점에 생성되어야 함

이런 이유 때문에 인라인은 적용이 가능했나봄

✨  해결 방안

 

1. 전용 스타일 클래스 정의하여 사용하기

/* globals.css */
.modal-container {
  @apply flex flex-col w-[585px] h-[300px] p-6;
}

2. 컴포넌트 분리 방식

const ModalContent = () => {
  return (
    <div className="modal-container">
      {/* 모달 내용 */}
    </div>
  );
};

 

 

학습한 점

 

1. Tailwind CSS의 JIT 컴파일러 동작 방식에 대해 이해함
2. 런타임과 컴파일타임의 차이가 스타일 적용에 미치는 영향을 파악함
3. 동적 컴포넌트의 스타일링 시 고려해야 할 사항들을 배움

💡 결론

 

컴포넌트 분리 방식이 가장 권장됨

• 재사용성 증가
• Tailwind 클래스 그대로 사용 가능
• 유지보수 용이

 

마치며

 

물론 현재 프로젝트 상황으로 인해서 인라인 스타일을 임시적으로 사용하기로 했지만

나중에 위에서 정리된 해결 방법을 통해서 실제로 프로젝트에 녹여보도록 해봐야겠음