CSS → Tailwind 변환기

CSS 속성을 Tailwind 유틸리티 클래스로 즉시 변환합니다. 무료, 브라우저에서 완결.

100% 클라이언트 사이드 데이터가 브라우저 밖으로 나가지 않습니다 무료 · 회원가입 불필요
Coverage notes

Covers ~80% of common CSS properties. Unmapped properties are listed as /* keep: property: value */ comments in the output so you can handle them manually.

사용 방법

  1. 변환할 CSS 속성을 입력창에 붙여넣습니다(예: color: red; font-size: 16px;).
  2. 대응하는 Tailwind 클래스가 즉시 표시됩니다.
  3. 결과를 복사하여 HTML에 붙여넣습니다.

Tailwind CSS에 대하여

Tailwind CSS는 유틸리티 퍼스트 CSS 프레임워크로, 미리 정의된 클래스를 HTML에 직접 적용하여 스타일링합니다. 기존 CSS를 Tailwind 프로젝트로 마이그레이션할 때나 Tailwind 클래스를 빠르게 찾고 싶을 때 이 도구가 유용합니다.

FAQ

모든 CSS 속성을 지원합니까?

주요 CSS 속성(스페이싱·타이포그래피·색상·플렉스·그리드·보더 등)을 지원합니다. 커스텀 값이나 Tailwind에 매핑이 없는 속성은 변환되지 않을 수 있습니다.

Tailwind v3와 v4 중 어느 것을 지원합니까?

Tailwind CSS v3의 클래스 명명 규칙을 기반으로 합니다.

대응하는 Tailwind 클래스가 없는 경우 어떻게 됩니까?

근사치 클래스 또는 Tailwind의 임의 값 구문(예: text-[#ff5733])을 제안합니다.

데이터가 서버로 전송됩니까?

아니요. 모든 변환 처리는 브라우저 내에서 완결됩니다.