[TailwindCss] - 자주 쓰는 스타일 정리

🔹 레이아웃 관련

• space-x-2 : 자식 요소 사이의 가로 간격을 0.5rem (8px) 만큼 띄움

• ml-auto : margin-left: auto; 로 설정하여 해당 요소를 오른쪽 끝으로 정렬

• relative : 부모 요소를 상대적인 위치로 지정 (기본 위치에서 이동 가능하게 만듦)

• overflow-hidden : 넘치는 콘텐츠를 숨김

• aspect-square : 너비와 높이를 동일하게(1:1 비율) 설정하여 정사각형으로 만듦

• inset : top, right, bottom, left 값을 한 번에 지정하는 속성 (ex: inset-0 → 모든 방향 0)

• border-b : 아래(border-bottom)에 선을 추가

• max-w-sm : 최대 너비를 small (24rem = 384px)로 제한

flex-1을 주어 남은 영역을 차지하고 + overflow-y-auto로 채팅 목록이 길어질 경우 스크롤 + 부모 컨테이너h-screen( 화면 전체 높이를 차지하도록 설정 )

• h-screen : 요소의 높이를 화면 전체 높이(100vh) 로 설정

• w-fit : 내용물에 딱 맞는 너비로 설정 (너비가 내용 크기에 맞춰짐)

• flex-1 : 남은 공간을 차지하는 플렉스 아이템이 됨

• flex-grow : 컨테이너 안에서 남는 공간을 차지하도록 설정

 

🔹 텍스트 관련

• text-base : 기본 폰트 크기 (16px)

• text-center : 텍스트를 가운데 정렬

• line-clamp-2 : 텍스트를 두 줄까지만 표시하고 나머지는 ...(ellipsis)로 처리

(사용하려면 @tailwind line-clamp 플러그인이 필요함)

• leading-none : 줄 간격을 글자 높이와 동일하게 설정 (줄 간격을 줄임)

• antialiased : 폰트 안티앨리어싱 적용 (글자를 더 부드럽게 렌더링)

• whitespace-pre-line : 문자열에 \n이 포함되어 있으면, 실제 줄바꿈으로 렌더링

leading-snug

 

🔹 스타일 및 효과

• transform : 요소에 변형(transform) 효과를 적용 가능 (ex: scale-105, rotate-45 등과 함께 사용)

• marker:text-pink-500 : 리스트(list-disc)의 • 불릿 색상을 핑크 (text-pink-500)로 변경