Tailscan for Tailwind CSS

핵심 발상은 페이지를 떠날 필요가 없다는 것이다. 아무 요소에 마우스를 올려 Tailwind 클래스를 보고, 스페이스 키로 고정한 뒤, 디자인이 실시간으로 갱신되는 동안 클래스를 추가하거나 편집하거나 숨긴다. 변경은 요소별로 유지되므로 부담 없이 실험하고, 끝나면 편집을 한 번에 복사할 수 있다. 저장과 리로드의 왕복이 싫은 사람에게는 이 도구를 사게 만드는 기능이다.

버전 3에는 AI 리스타일 Tailwind를 위한 패널이 더해져, 자연어 요청을 그대로 Tailwind 변경으로 바꾼다. "이 버튼을 모서리 둥글게 더 크게"처럼 입력하면 클래스가 자동으로 적용되고, 보이는 유틸리티로 남겨 둘 수도 있다. 변경 내용을 깔끔한 코드나 재사용 가능한 프롬프트로 내보낼 수 있어 같은 스타일을 프로젝트 전체로 확장할 수 있다. 걸리는 건 사용량이다. 요금제는 한 달에 AI 요청 1000건을 허용하고, 그 뒤로는 그달 남은 기간 동안 더 저렴한 모델로 전환된다.

요소를 클릭 한 번으로 Tailwind 컴포넌트로 변환할 수 있다. Tailscan은 아무 사이트의 아무 요소나 재사용 가능한 Tailwind CSS 컴포넌트로 바꾼다. 마음에 드는 카드나 내비게이션 바, 버튼을 골라 변환하고, 클래스 단위로 다시 쓰는 대신 마크업을 자기 프로젝트로 가져올 수 있다는 뜻이다. 살펴보기를 실제 결과물로 바꾸는 부분이며, 남의 사이트에서 이걸 쓰는 이유이기도 하다.

빌드가 제거하는 클래스와 임의값을 쓰는 클래스를 포함해 어떤 Tailwind 클래스와 변형이든 추가할 수 있다. 자기 Tailwind 설정을 가져오면 테마 확장이 곧바로 나타나, 제안이 기본 Tailwind가 아니라 내 프로젝트에 맞춰진다. 마지막 지점은 커스텀 스케일을 쓰는 팀에 중요하다. 기본값만 아는 인스펙터는 그들에게 금세 쓸모가 없어진다.

Tailscan은 브라우저 개발자 도구에 붙는다. 개발자 도구 패널 안에서 클래스를 편집하고 네이티브 요소 선택을 쓸 수 있으며, 입력하는 대로 클래스가 컴파일된다. 자동 완성이 올바른 클래스를 제안하고 색을 미리 보여주며, 브레이크포인트 표시가 지금 보고 있는 Tailwind 브레이크포인트를 알려준다. 클래스 이름을 찍어 맞히는 것과 알려주는 것의 차이다.

계산된 영역과 가이드라인이 요소 주변의 실제 margin과 padding을 보여주므로, 정렬 문제가 추측이 아니게 된다. 내장 스크린샷 도구가 화면 일부를 캡처해 빠르게 넘길 수 있게 하고, 클래스 목록이나 편집이 반영된 요소 전체를 복사할 수 있다. 사소한 편의지만 하루 작업을 통틀어 쌓이면 크다.