CSS를 Tailwind로
CSS 선언을 기준으로 빠르게 점검합니다.
아직 표시할 CSS 선언 정보가 없습니다.
기존 CSS를 유틸리티 클래스 초안으로
수동 변환 시간 줄이기
알려진 CSS 선언을 Tailwind 유틸리티 클래스 후보로 바꿔 기존 CSS를 더 빠르게 Tailwind 흐름으로 옮길 수 있습니다.
임의값 보존
표준 유틸리티 클래스가 없는 값은 Tailwind의 arbitrary syntax로 보존할 수 있습니다.
마이그레이션 초안으로 사용
결과를 초안으로 쓰고 반복되는 값은 토큰, 컴포넌트, variant, 재사용 클래스 패턴으로 정리하세요.
자주 변환되는 속성
display와 flex/grid 배치margin과 paddingwidth, height, max-widthfont-size, font-weight, line-heighttext-align과 colorbackground-colorborder, border-radiusbox-shadowgap과 spaceposition과 insetopacityoverflowz-index
복잡한 선택자, 의사 요소, 캐스케이드 의도는 변환 후 사람이 반드시 검토해야 합니다.
자주 묻는 질문
변환 결과를 그대로 production에 써도 되나요?
아니요. 자동 변환은 시작점으로 쓰는 것이 좋습니다. 복잡한 선택자, 반응형 규칙, 의사 요소, 캐스케이드 동작, 컴포넌트 의미는 사람이 검토해야 합니다.
selector 없이 선언만 붙여 넣어도 되나요?
네. 도구가 선택자 없는 선언을 임시로 감싸 변환할 수 있게 처리합니다.
반복되는 임의값은 어떻게 해야 하나요?
UI 전체에서 반복되는 값이라면 일회성 arbitrary utility를 많이 남기기보다 테마 토큰, 컴포넌트 클래스, 디자인 시스템 기본 요소로 정리하는 것을 검토하세요.
미디어 쿼리나 hover 상태도 변환하나요?
일부 단순 선언은 변환될 수 있지만 반응형 variant, hover 상태, 의사 요소, 중첩 선택자는 변환 후 수동 정리가 필요한 경우가 많습니다.