tailwind css의 특성 상  코드가 끝없이 길어지는 건 자주 일어나는 일이다또한 display : flex를 사용하다보면 div가 많이 사용되어 전체 코드를 봤을 때,각 영역을 한눈에 구분하기가 어렵다이로인해 전체 코드의 가독성이 떨어지게 된다!   그래서 오늘은  React + TypeScript + Tailwind를 사용할 때재사용 가능한, 가독성 높이는 UI 컴포넌트 만드는 방법에 대해 이야기해보려한다!    저도 배우고 공부하고 있는 학생입니다무조건 제 코드가 정답은 아닙니다 :)   전후 코드 비교해보기  개선하기 전 코드인 왼쪽을 봤을 때, 일단 가로로 무척 길어서 코드를 한 화면에 보기 어렵다또한 div와 section이 얽혀있어 각각의 div와 section 이 어떤 영역인지 한 눈..