CSS → Tailwind 변환기

Tailwind CSS에 대하여

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

예시: 호버 상태와 미디어 쿼리가 있는 버튼

.btn {
  margin: 0 auto;
  padding: 16px 24px;
  color: #3b82f6;
  background-color: #ffffff;
  width: 50%;
  max-width: 64rem;
  line-height: 1.5;
  border: 1px solid #e5e7eb;
  margin-top: 13px;
  transition: all 0.2s;
}
.btn:hover { background-color: #2563eb; }
@media (min-width: 768px) { .btn { padding: 2rem; } }

변환 결과:

/* .btn */
my-0 mx-auto py-4 px-6 text-blue-500 bg-white w-1/2 leading-normal border border-solid border-gray-200 transition-all duration-200
/* keep: max-width: 64rem */
/* keep: margin-top: 13px */

/* .btn:hover */
bg-blue-600

/* .btn (md) */
md:p-8

무슨 일이 있었는지, 클래스를 어떻게 마무리하는지(Tailwind 문서):

• 16px 24px는 py-4 px-6이 되었습니다. 픽셀 값을 16으로 나눠 rem으로 만들고, 간격 한 단계는 0.25rem입니다.
• #3b82f6, #ffffff, #2563eb는 기본 팔레트 색(blue-500, white, blue-600)과 일치했습니다.
• border: 1px solid #e5e7eb는 border border-solid border-gray-200이 되었습니다. 축약 속성의 각 부분(두께, 스타일, 색)이 모두 대응표에 있을 때만 변환하고, 하나라도 없으면 선언 전체를 주석으로 남기므로 일부가 빠지지 않습니다.
• transition: all 0.2s는 transition-all duration-200이 되었습니다. Tailwind의 transition-* 클래스만 쓰면 150 ms가 되므로 시간을 항상 적습니다. 이 클래스들은 타이밍 곡선도 cubic-bezier(0.4, 0, 0.2, 1)로 정하지만 CSS 기본값은 ease입니다. 곡선까지 맞추려면 ease-[ease]를 더하세요.
• max-width: 64rem은 max-w-5xl이 64rem인데도 주석으로 남았습니다. 도구의 대응표에 없는 값은 해당 클래스가 있어도 그대로 남습니다.
• .btn:hover는 별도 그룹이 되었습니다. hover: 접두사를 붙여 hover:bg-blue-600으로 쓰세요.
• @media (min-width: 768px) 안의 규칙은 md:p-8이 되었습니다. 768px은 기본 md 브레이크포인트입니다. 다른 미디어 쿼리는 그룹 주석에만 적고 접두사를 붙이지 않습니다.

완성된 클래스:

<button class="mx-auto mt-[13px] mb-0 py-4 px-6 md:p-8 text-blue-500 bg-white hover:bg-blue-600
               w-1/2 max-w-5xl leading-normal border border-solid border-gray-200
               transition-all duration-200">

예시: 선택자 없는 자주 쓰는 선언

padding: 0.5rem 1rem;
margin: 0;
top: 0;
z-index: 10;
overflow: hidden;
position: sticky;
opacity: 0.5;
cursor: pointer;
grid-template-columns: repeat(3, 1fr);
flex: 1;
height: 100vh;
font-size: 14px;

변환 결과:

py-2 px-4 m-0 top-0 z-10 overflow-hidden sticky opacity-50 cursor-pointer grid-cols-3 flex-1 h-screen text-sm

임의 값

기본 스케일에 없는 값은 대괄호로 쓸 수 있습니다: mt-[13px], max-w-[60rem], text-[#ff6600], grid-cols-[200px_1fr](밑줄은 공백 대신). 변환기는 이 형식을 만들지 않고 keep 주석을 남기므로, 임의 값을 쓸지 가장 가까운 스케일을 쓸지 정하세요.

제한 사항

• 값은 대응표에서 찾을 뿐 계산하지 않습니다. 표에 없는 값은 대응 클래스가 있어도 주석으로 남습니다(위 max-width).
• 의사 클래스가 붙은 선택자는 별도 그룹이 되고 hover:, focus: 접두사는 출력되지 않습니다.
• 접두사가 되는 것은 너비가 기본 브레이크포인트(640px, 768px, 1024px, 1280px, 1536px 또는 같은 값의 rem)인 @media (min-width: …)뿐입니다. 다른 미디어 쿼리, @supports, 컨테이너 쿼리는 그룹 주석에만 적습니다.
• 쉼표로 나열한 여러 transition, cubic-bezier(), 스케일 밖의 시간(0, 75, 100, 150, 200, 300, 500, 700, 1000 ms 외)은 주석으로 남습니다.
• CSS 변수, calc(), 기본 팔레트 밖의 색은 주석으로 남습니다.
• Tailwind v4에서 일부 유틸리티 이름이 바뀌었습니다(그림자와 모서리 반경 스케일 등). v4를 쓴다면 업그레이드 가이드를 확인하세요.