CSS → Tailwind 유틸리티
개인정보 보호 설계 — 브라우저에서 모두 처리됩니다
왼쪽에 CSS 선언을 붙여 넣고 오른쪽에서 Tailwind 유틸리티 클래스를 복사하세요. 변환기는 spacing, 색상, 타이포그래피, 레이아웃의 표준 스케일을 네이티브 유틸리티로 매핑하고, Tailwind 가 모르는 값은 대괄호 표기로 떨어뜨려 결과를 항상 유효하게 유지합니다.
매핑되는 속성
변환기는 일상적인 CSS 표면을 이해합니다. padding 과 margin 의 spacing, 폰트 크기와 굵기, 색상 (text 와 bg), display, flex 방향과 정렬, border-radius, width 와 height, position, gap 입니다. 각각은 p-4, text-lg, justify-between 같은 Tailwind 의 정식 단축형으로 변환되어 결과가 손으로 적은 Tailwind 처럼 읽힙니다.
임의 표기가 필요한 이유
실제 코드베이스는 단축형이 없는 값을 자주 사용합니다. 13px 의 커스텀 폰트 크기, 고유한 hex 의 브랜드 색상, 1.7rem 의 gap 같은 것들 입니다. 변환기는 이런 경우 text-[13px] 이나 bg-[#3b82f6] 같은 Tailwind 의 임의 형식을 출력합니다. 생성된 클래스는 여전히 유효한 Tailwind 이고 JIT 가 처리하며 Tailwind-to-CSS 방향의 왕복도 깨끗하게 통합니다.
그대로 흘려보내는 경우
복잡한 셀렉터, 애니메이션, 그라디언트, keyframes 는 의도적으로 변환하지 않습니다. 이들은 Tailwind 가 플러그인이나 @apply 로 다루는 레이어이며, 휴리스틱 매핑은 정확성에 대해 거짓말을 하게 됩니다. 해당 선언은 [prop:value] 임의 클래스 안에 그대로 출력되어, 데이터를 잃지 않고 검토할 수 있습니다.
자주 묻는 질문
- 어떤 CSS 속성이 인식되나요?
- padding 과 margin 의 spacing 스케일, 텍스트와 배경 색상, display, flex 정렬, 폰트 크기와 굵기, border-radius, width 와 height, position, gap 입니다. 나머지는 모두 [prop:value] 임의 클래스로 떨어집니다.
- 기본 스케일에 없는 값은 어떻게 되나요?
- 변환기는 p-[13px] 또는 bg-[#3b82f6] 같은 임의 표기를 출력합니다. JIT 가 이를 컴파일하며 클래스는 수동 편집 없이도 유효한 Tailwind 로 남습니다.
- 커스텀 CSS 변수도 다루나요?
- 네. var(--token) 값은 대괄호 형태로 그대로 전달됩니다. 토큰은 여전히 tailwind.config 테마나 :root 의 커스텀 프로퍼티에 선언되어 있어야 합니다.
- 변환은 무손실인가요?
- 흔한 패턴은 무손실입니다. 애니메이션, 그라디언트, 특수 셀렉터는 임의 클래스로 남기 때문에 변환은 통과하지만 원본 CSS 를 함께 보관하고 싶을 수 있습니다.
- Tailwind-to-CSS 도구와 왕복할 수 있나요?
- 대부분 가능합니다. 단순한 유틸리티는 동일하게 돌아오고 임의 값도 보존됩니다. 다만 지원되지 않는 선언은 돌아갈 때도 임의 형태로 남습니다.
- 어딘가로 업로드되나요?
- 아니요. 변환은 이 브라우저 탭 안에서 완전히 처리되며 스타일시트 내용은 페이지 밖으로 나가지 않습니다.