Tailwind 유틸리티 → CSS
개인정보 보호 설계 — 브라우저에서 모두 처리됩니다
Tailwind 유틸리티 클래스 목록과 선택자를 함께 붙여 넣으면 Toova 가 그에 대응하는 CSS 규칙을 만들어 줍니다. p-[13px] 나 [grid-template-columns:1fr_2fr] 같은 임의 클래스는 원래의 선언으로 풀려 스타일시트에 바로 넣을 수 있습니다.
역방향이 도움이 되는 경우
Tailwind 로 시제품을 만들었지만 CSS 로 납품해야 하는 경우가 있습니다. 마케팅 이메일, 서드파티 위젯, Tailwind 를 로드하지 않는 CMS 등이 그렇습니다. 변환기는 유틸리티 목록을 당신이 선택한 선택자로 묶인 단일 규칙으로 접어 주므로, 이름을 바꾸거나 플레이그라운드 마크업을 다듬을 필요 없이 곧바로 붙여 넣을 수 있습니다.
임의 값이 돌아오는 방식
Tailwind 의 임의 클래스는 값을 그대로 안고 있습니다. p-[13px] 는 padding: 13px, [grid-template-columns:1fr_2fr] 는 grid-template-columns: 1fr 2fr 입니다. 변환기는 두 형태를 글자 그대로 풀기 때문에, JIT 로 적은 어떤 커스텀 값이든 별도의 매핑 표 없이 살아남습니다.
한계와 왕복
반응형 변형 (md:flex), 상태 변형 (hover:bg-black), 다크 모드 (dark:text-white) 는 미디어 쿼리나 의사 클래스 래퍼가 필요하므로 변환기는 아직 출력하지 않습니다. 붙여 넣기 전에 제거하세요. 테마 토큰 (text-brand) 은 기본 Tailwind 스케일로 떨어지며 커스터마이즈된 테마라면 임의 fallback 이 생깁니다. 일반 유틸리티는 CSS-to-Tailwind 도구와 깔끔하게 왕복합니다.
자주 묻는 질문
- 무엇이 변환되나요?
- spacing, 색상, 타이포그래피, flex, position 같은 일반적인 Tailwind 유틸리티와, 임의 [value] 또는 [prop:value] 형태입니다. 변형은 아직 지원되지 않습니다.
- 왜 선택자를 묻나요?
- 출력은 단일 CSS 규칙입니다. 선택자를 먼저 정하면 결과를 스타일시트에 그대로 붙여 넣을 수 있고 이름을 바꾸거나 다시 감쌀 필요가 없습니다.
- 반응형과 호버 변형도 지원되나요?
- 아직 아닙니다. 미디어 쿼리나 의사 클래스 래퍼가 필요하기 때문에, 붙여 넣기 전에 md:, hover:, dark: 접두사를 제거하세요. 기본 유틸리티는 깨끗하게 왕복합니다.
- 내 Tailwind 테마를 알고 있나요?
- 모릅니다. 기본 스케일을 사용하므로 커스터마이즈된 spacing 이나 색상은 출력에서 임의 선언으로 떨어지지만, 그래도 동작하는 CSS 를 얻을 수 있습니다.
- 역방향 도구로 다시 보낼 수 있나요?
- 가능합니다. 일반 유틸리티는 정확히 동일하게 왕복합니다. 임의 값은 살아남고 지원되지 않는 선언은 임의 클래스로 남습니다.
- 입력이 업로드되나요?
- 아니요. 모든 변환은 이 탭에서 수행되며 Toova 는 클래스 목록, 선택자, 출력 어느 것도 보지 못합니다.