CSS to Tailwind Converter

CSS 속성을 붙여넣으면 동등한 Tailwind CSS 유틸리티 클래스를 즉시 얻을 수 있어요.

CSS 입력
Tailwind 클래스16개 클래스 생성됨

flex flex-col items-center justify-between gap-4 p-6 m-2 w-full rounded-lg bg-[#1a1a2e] text-[#ffffff] text-base font-semibold cursor-pointer overflow-hidden relative

Tailwind CSS란?

Tailwind CSS는 유틸리티 우선(utility-first) CSS 프레임워크로, 커스텀 스타일시트를 작성하는 대신 HTML에 직접 조합하는 저수준 CSS 클래스를 제공해요. display: flex; flex-direction: column; gap: 16px을 쓰는 대신 flex flex-col gap-4라고 쓸 수 있어요. Tailwind의 접근 방식은 CSS 특이성 문제를 해소하고, 빠른 프로토타이핑을 가능하게 하며, 스타일을 마크업과 함께 유지할 수 있어요.

변환기 사용 방법

입력 박스에 CSS 속성 선언을 하나 이상 붙여넣으세요(예: padding: 16px, display: flex). 변환기가 각 선언을 파싱하여 가장 잘 매칭되는 Tailwind 유틸리티 클래스를 찾아요. 간격 값은 Tailwind의 4px 스케일로 매핑돼요(예: 16px → p-4). 색상은 bg-[#FF5733] 같은 임의 값 클래스로 출력돼요. Tailwind에 직접 대응하는 것이 없는 속성은 주석으로 보존돼요.

이 변환기가 지원하는 것

가장 일반적인 CSS 속성을 처리해요: display, flexbox(flex-direction, justify-content, align-items, gap), grid, padding, margin, width, height, font-size, font-weight, text-align, border-radius, background-color, color, cursor, overflow, position, z-index. 숫자 값은 자동으로 가장 가까운 Tailwind 스케일 값으로 매핑돼요.

CSS to Tailwind 변환 예시

  • display: flex → flex
  • padding: 16px → p-4
  • border-radius: 9999px → rounded-full
  • font-weight: bold → font-bold
  • background-color: #1a1a1a → bg-[#1a1a1a]