Tailwind CSS 클래스 정렬기

Tailwind CSS 클래스 정렬기 완벽 가이드

Tailwind CSS는 유틸리티 퍼스트(Utility-First) CSS 프레임워크로, HTML 요소에 직접 클래스를 적용하여 스타일을 구성하는 방식을 사용합니다. 프로젝트 규모가 커질수록 하나의 HTML 요소에 수십 개의 Tailwind 클래스가 추가되는 것은 흔한 일이며, 이러한 클래스들이 일관된 순서 없이 작성되면 코드의 가독성과 유지보수성이 크게 저하됩니다. 이 Tailwind CSS 클래스 정렬기는 Tailwind Labs에서 공식적으로 권장하는 클래스 순서 규칙을 기반으로, 입력된 클래스를 자동으로 정렬해주는 온라인 도구입니다.

정렬 순서는 다음과 같은 카테고리를 따릅니다: 먼저 레이아웃 관련 클래스(display, position, flex, grid, z-index 등)가 배치되고, 그 다음으로 박스 모델(width, height, padding, margin, overflow 등), 타이포그래피(font, text, leading, tracking 등), 배경(bg, gradient, from, via, to 등), 보더(border, rounded, ring, outline 등), 효과(shadow, opacity, blur, filter 등), 트랜지션 및 애니메이션(transition, duration, ease, animate 등) 순서로 정렬됩니다. 반응형 프리픽스(sm:, md:, lg:, xl:, 2xl:)가 붙은 클래스는 해당 카테고리 내에서 브레이크포인트 크기순으로 정렬되며, 상태 변형(hover:, focus:, active:, dark: 등)도 올바르게 처리됩니다.

이 도구의 핵심 기능 중 하나는 중복 클래스 자동 제거입니다. 개발 과정에서 실수로 같은 클래스를 여러 번 작성하는 경우가 많은데, 이 도구는 정렬 과정에서 중복된 클래스를 자동으로 감지하고 제거하여 최적화된 결과를 제공합니다. 또한 정렬 전후 비교(diff) 기능을 통해 어떤 클래스가 어떻게 재배치되었는지 시각적으로 확인할 수 있어 학습 목적으로도 유용합니다.

Tailwind CSS의 공식 Prettier 플러그인(prettier-plugin-tailwindcss)과 동일한 정렬 철학을 따르므로, 이 도구로 정렬한 결과는 Prettier 플러그인을 사용하는 프로젝트와 호환됩니다. CI/CD 환경에서 자동 포맷팅을 설정하기 전에 이 도구로 미리 정렬 결과를 확인하거나, Prettier를 설치하지 않은 환경에서 빠르게 클래스를 정리하고 싶을 때 활용할 수 있습니다.

사용 방법

입력란에 Tailwind CSS 클래스를 공백으로 구분하여 붙여넣거나, HTML 태그를 통째로 붙여넣습니다.
입력 형식을 선택합니다 (클래스만 또는 HTML 태그).
"정렬하기" 버튼을 클릭하면 권장 순서로 정렬된 결과가 표시됩니다.
"정렬 전후 비교" 버튼으로 변경 사항을 확인할 수 있습니다.
결과를 복사하여 코드에 바로 적용하세요.

정렬 카테고리 상세

레이아웃: container, block, inline, flex, grid, hidden, relative, absolute, fixed, sticky, z-index 등
박스 모델: w-, h-, min-w-, max-w-, p-, m-, overflow, aspect-ratio, size 등
타이포그래피: font-, text-, leading-, tracking-, whitespace, truncate 등
배경: bg-, from-, via-, to-, gradient 관련 클래스
보더: border-, rounded-, ring-, outline-, divide 등
효과: shadow-, opacity-, blur-, brightness-, filter 등
트랜지션: transition-, duration-, ease-, delay-, animate- 등
반응형/상태: sm:, md:, lg:, xl:, 2xl:, hover:, focus:, dark: 등

자주 묻는 질문 (FAQ)

Q. Tailwind CSS 클래스 순서는 왜 중요한가요?

A. 일관된 클래스 순서는 코드의 가독성을 높이고, 팀 협업 시 코드 리뷰를 쉽게 만들어 줍니다. Tailwind Labs에서도 공식 Prettier 플러그인을 통해 클래스 순서 통일을 권장하고 있습니다. 순서가 일관되면 특정 스타일을 빠르게 찾을 수 있고, 불필요한 중복 클래스를 발견하기도 쉬워집니다.

Q. 커스텀 클래스(Tailwind에 없는 클래스)는 어떻게 처리되나요?

A. Tailwind 유틸리티 클래스로 인식되지 않는 커스텀 클래스는 정렬 결과의 맨 마지막에 원래 순서를 유지한 채 배치됩니다. 이는 Prettier 플러그인의 동작 방식과 동일합니다.

Q. 반응형 프리픽스(sm:, md: 등)가 붙은 클래스는 어떻게 정렬되나요?

A. 반응형 프리픽스가 붙은 클래스는 프리픽스를 제거한 기본 클래스의 카테고리에 따라 정렬됩니다. 같은 카테고리 내에서는 브레이크포인트 크기 순서(sm → md → lg → xl → 2xl)로 배치되며, 프리픽스가 없는 기본 클래스가 가장 먼저 옵니다.

Q. 중복 클래스가 있으면 어떻게 되나요?

A. 완전히 동일한 클래스가 두 번 이상 입력된 경우 자동으로 하나만 남기고 제거됩니다. 제거된 중복 클래스의 수는 통계 정보에 표시됩니다.

Q. HTML 태그를 통째로 붙여넣을 수 있나요?

A. 네, 입력 형식을 "HTML 태그 (class="..." 추출)"로 선택하면 HTML 태그에서 class 속성의 값을 자동으로 추출하여 정렬합니다. 여러 태그가 포함된 경우 첫 번째 class 속성이 처리됩니다.

Q. 이 도구의 정렬 규칙은 Prettier 플러그인과 동일한가요?

A. 이 도구는 Tailwind Labs의 prettier-plugin-tailwindcss에서 사용하는 정렬 철학과 카테고리 구분을 참고하여 구현되었습니다. 대부분의 경우 동일한 결과를 제공하지만, 일부 엣지 케이스에서는 미세한 차이가 있을 수 있습니다.

이런 도구는 어때요?