CSS를 TailwindCSS 클래스로 변환 — Numio

이럴 때 사용하세요

• 마이그레이션 중 기존 CSS 규칙에 대응하는 Tailwind 유틸리티를 찾을 때.
• 이미 아는 CSS를 변환해 보며 Tailwind 클래스 이름을 익힐 때.

사용 방법

1. CSS 규칙을 붙여 넣습니다.
2. 프로젝트에서 사용자 지정 설정을 쓴다면 rem 기준값이나 Tailwind 설정을 조정합니다.
3. @apply 뒤의 클래스를 마크업이나 스타일시트에 복사한 뒤 Tailwind 프로젝트에서 결과를 확인합니다.

.card { display: flex; padding: 1rem; }

.card {
  @apply flex p-4;
}

세부 정보 및 제한 사항

클래스 이름과 스케일은 Tailwind CSS v3를 따릅니다. Tailwind CSS v4의 설정 및 구문과의 호환성은 보장되지 않습니다.

사용자 지정 값, 복잡한 선택자, 의사 요소는 변환되지 않을 수 있습니다. 출력이 똑같이 보인다는 보장은 없으니 실제 페이지에서 확인하세요.

사용자 지정 설정 필드는 브라우저에서 JavaScript로 실행됩니다. 신뢰할 수 없는 설정은 붙여 넣지 마세요.

FAQ

관련 도구