Tailwind Helper는 웹 페이지의 아무 요소를 검사하여 Tailwind CSS 유틸리티 클래스를 카테고리별로 상세하게 분류하여 보여줍니다. 단순한 클래스 문자열이 아닌 Layout, Spacing, Typography, Colors, Borders, Effects 등 논리적인 카테고리로 정리되어 각 클래스가 어떤 역할을 하는지 정확히 이해할 수 있습니다.
Copy as Tailwind가 빠른 클래스 문자열을 제공한다면, Tailwind Helper는 깊이 있는 분석을 위한 동반 도구입니다. 요소의 스타일 구성을 Tailwind 관점에서 완전히 이해하고 싶은 개발자를 위해 만들어졌습니다. 계산된 모든 CSS 속성을 Tailwind에 대응하는 클래스로 매핑하고, 논리적인 카테고리로 그룹화합니다. 한눈에 요소가 flex 레이아웃에 items-center 정렬을 사용하고, p-5 패딩과 gap-3을 사용하며, text-lg font-bold 타이포그래피와 bg-slate-900 rounded-lg border border-slate-700을 사용하는지 바로 확인할 수 있습니다. 개별 클래스를 클릭하여 복사하거나 "Copy All"로 전체 문자열을 가져올 수 있습니다. 카테고리별 보기 덕분에 필요한 클래스만 선택적으로 가져오기 쉽습니다.
Tailwind 클래스가 명확한 카테고리로 정리됩니다: Layout(flex, grid, position), Spacing(패딩, 마진, gap), Typography(폰트 크기, 굵기, 색상), Colors(배경, 텍스트, 보더), Borders(둥글기, 두께, 스타일), Effects(섀도우, opacity, transform). 각 카테고리는 접을 수 있으며 명확하게 라벨이 붙어 있습니다.
버튼, 카드, 제목, 입력창, 컨테이너 등 아무 요소나 클릭하면 패널에 즉시 Tailwind 클래스 분류가 채워집니다. 검사 중인 요소는 보라색 테두리로 강조 표시되어 정확히 어떤 요소인지 알 수 있습니다.
각 Tailwind 클래스가 클릭 가능한 태그로 표시됩니다. p-5나 font-bold 같은 단일 태그를 클릭하면 해당 클래스만 클립보드에 복사됩니다. "copied" 애니메이션이 표시되어 동작을 확인할 수 있습니다. 한두 개의 클래스만 필요할 때 유용합니다.
하단의 "Copy All Classes" 버튼을 클릭하면 모든 Tailwind 클래스를 공백으로 구분된 하나의 문자열로 생성하여 클립보드에 복사합니다. className="..." 또는 class="..."에 바로 붙여넣을 수 있습니다.
모든 값이 Tailwind의 기본 간격 및 크기 스케일에 매핑됩니다. 16px 폰트는 text-base로, 24px 패딩은 p-6으로, #7c3aed는 purple-600으로 변환됩니다. 정확한 매치가 없을 경우 가장 가까운 값을 선택하고 표시합니다.
패널의 Tailwind 클래스 태그 위에 마우스를 올리면 해당 클래스가 생성된 원본 계산된 CSS 값을 볼 수 있습니다. 예를 들어 "p-5" 위에 올리면 "padding: 20px"이 표시됩니다. 이 양방향 보기를 통해 Tailwind 스케일을 빠르게 학습할 수 있습니다.
Tailwind 도우미 covers the following, organized by category:
flexgridblockinline-flexrelativeabsolutestickyitems-centerjustify-betweengap-*p-* (padding)m-* (margin)px-* py-*mx-autospace-x-*w-* h-*max-w-*min-h-*text-sm / text-base / text-lgfont-normal / font-boldleading-* (line-height)tracking-* (letter-spacing)text-centeruppercasetext-{color}-{shade}bg-{color}-{shade}border-{color}-{shade}opacity-*borderborder-2rounded-* (radius)border-solid / dasheddivide-*shadow-sm / shadow-md / shadow-lgring-*transitionduration-*hover:*평평한 클래스 문자열이 아닌 카테고리별 보기를 통해 요소의 완전한 구성 요소를 이해할 수 있습니다. 카드가 flex 레이아웃을 사용하고, 특정 패딩, 볼드 타이포그래피, 슬레이트 배경, 둥근 보더, 미묘한 섀도우를 사용하는지 각 항목별로 확인할 수 있습니다.
잘 디자인된 요소를 검사한 후, 레이아웃은 한 요소에서, 타이포그래피는 다른 요소에서, 색상은 브랜드 팔레트에서 가져와 Tailwind 프로젝트에서 재현할 수 있습니다. 섞어서 사용하기 좋습니다.
클래스 태그 위에 마우스를 올려 CSS 원본 값을 확인하세요. p-4가 16px을 의미하고, text-lg가 18px을 의미하며, purple-600이 #7c3aed라는 것을 인터랙티브하게 배울 수 있습니다. 어떤 웹사이트든 Tailwind 학습 도구로 활용할 수 있습니다.
Tailwind로 만든 사이트의 요소를 검사하여 디자인 시스템의 간격, 색상, 타이포그래피가 일관되게 사용되고 있는지 확인하세요. p-[13px] 같은 일회성 값이 p-3이나 p-3.5 같은 표준 스케일 값으로 바뀌어야 하는지 발견할 수 있습니다.
빠른 클래스 문자열이 필요할 때는 Copy as Tailwind를 사용하세요. 클래스 분류를 자세히 공부하거나, 개별 클래스를 선택적으로 복사하거나, 각 CSS 속성에 어떤 Tailwind 클래스가 선택되었는지 이해하고 싶을 때는 Tailwind Helper를 사용하세요.
DevSuite Pro 플로팅 독을 열고 Tailwind Helper 아이콘을 클릭하세요. 오른쪽에 패널이 나타나며 클래스 분류를 표시할 준비가 됩니다.
페이지의 아무 요소를 클릭하세요. 보라색 테두리로 강조 표시되고, 패널에 Layout, Spacing, Typography, Colors, Borders, Effects 카테고리별로 Tailwind 클래스가 표시됩니다.
각 카테고리를 살펴보며 요소의 전체 스타일 구성을 이해하세요. 각 클래스는 클릭 가능한 태그입니다. 마우스를 올리면 원본 CSS 값을 보고, 클릭하면 해당 클래스만 복사할 수 있습니다.
개별 태그를 클릭해 특정 클래스를 복사하거나, 하단의 "Copy All Classes" 버튼으로 전체 문자열을 한 번에 가져오세요. Tailwind 컴포넌트에 바로 붙여넣을 수 있습니다.
페이지의 다른 요소를 클릭하면 패널이 즉시 새 클래스로 업데이트됩니다. 도구를 비활성화하고 다시 활성화할 필요 없이 연속으로 여러 요소를 검사할 수 있습니다.
DevSuite Pro를 무료로 설치하고 브라우저용 39개 이상의 개발자 도구를 사용해보세요.