Softonic

CSS를 Tailwind로 변환

단계 1 / 2
Tailwind로 변환

레거시 스타일시트를 규칙 하나씩 Tailwind로 옮기는 작업은 번거롭습니다. 이 변환기는 선택자와 중괄호가 있든 없든 일반 CSS 블록을 입력받아 각 선언을 Tailwind 유틸리티로 다시 작성합니다. 인식된 쌍은 flex, items-center, rounded-lg와 같은 명명된 유틸리티로 매핑되고, 그 외의 모든 것은 Tailwind의 임의 값 구문 [property:value]로 대체되므로 어떤 것도 조용히 누락되지 않습니다.

변환기가 CSS를 처리하는 방식

  1. 1

    CSS 붙여넣기

    `.card { padding: 16px; border-radius: 8px; }`와 같은 전체 규칙을 붙여넣거나, 중괄호 안의 선언만 붙여넣습니다.

  2. 2

    파서가 주석을 제거

    선언이 세미콜론으로 분리되기 전에 블록 주석 `/* ... */`이 제거됩니다.

  3. 3

    각 선언이 매핑됨

    일반적인 속성은 실제 Tailwind 유틸리티로 매핑됩니다(여백, 모서리 반경, 글꼴 크기, flex, display, text-align). 알 수 없는 속성은 `[prop:value]`로 대체됩니다.

  4. 4

    복사하여 적용

    클래스 목록을 대응하는 HTML 요소의 `class` 속성에 붙여넣습니다.

명명된 유틸리티로 매핑되는 항목

Tailwind의 기본 테마는 가능한 모든 CSS 값을 다룰 수 없으므로, 변환기는 명명된 유틸리티가 있는 값을 우선하고 그 외의 경우에는 임의 값을 사용합니다.

직접 매핑

CSS 선언 Tailwind 유틸리티
display: flex flex
display: grid grid
display: none hidden
justify-content: center justify-center
align-items: center items-center
text-align: center text-center
font-weight: bold font-bold
cursor: pointer cursor-pointer
overflow: hidden overflow-hidden

스케일을 고려한 매핑

padding, margin, width, height 및 최소/최대 치수는 모두 px 값을 4로 나누어 Tailwind 여백 단계를 생성합니다. 예를 들어 padding: 16px는 p-4가 되고 width: 32px는 w-8이 됩니다. 깔끔한 단계에 들어맞지 않는 값은 해당 유틸리티에서 임의 값으로 대체됩니다. 예를 들어 width: 37px는 w-[37px]가 됩니다.

border-radius는 가장 가까운 명명된 유틸리티(rounded-sm, rounded-md, rounded-lg, rounded-xl, rounded-2xl)로 매핑됩니다. 16px를 초과하는 크기는 rounded-full이 되며, 이는 알약(pill) 형태의 요소에는 편리하지만 비정상적으로 큰 반경에는 적절하지 않습니다. 배포하기 전에 출력을 확인하세요.

font-size는 픽셀 임계값에 따라 text-xs에서 text-3xl까지의 단계로 분류됩니다.

유의 사항

  • 의사 클래스, 미디어 쿼리, 선택자는 변환되지 않으며, 중괄호 안의 선언만 변환됩니다. hover:나 md: 같은 변형은 여전히 직접 추가해야 합니다.
  • 변환기는 사용자의 Tailwind 테마 팔레트를 알지 못하므로 색상은 text-[#1f2937]와 같은 임의 값으로 표시됩니다. 수동으로 text-gray-800이나 직접 정의한 토큰으로 교체하세요.
  • 거의 사용하지 않는 축약 속성(border, background, transition)은 그대로 [property:value] 형태로 출력되므로 배포하기 전에 확인하세요.

자주 묻는 질문

출력에는 Tailwind v3와 v4 모두에서 안정적으로 사용되는 유틸리티 이름이 사용됩니다. 대괄호 안의 임의 값도 두 버전 모두에서 유효합니다. 붙여넣은 후에는 색상을 v4의 @theme 팔레트로 다시 토큰화하는 것이 좋습니다.

변환기는 사용자의 tailwind.config.js 색상 스케일을 볼 수 없으므로 색상을 해당 유틸리티의 임의 값(text-[#1f2937])으로 출력합니다. 수동으로 가장 가까운 팔레트 토큰, 예를 들어 text-gray-800이나 직접 정의한 브랜드 토큰으로 매핑하세요.

네, 여러 규칙을 붙여넣으세요. 이 도구는 선택자마다 하나의 클래스 목록을 출력하고 각 목록을 /* selector */ 주석으로 구분하므로 대응하는 HTML과 맞춰볼 수 있습니다.

변환을 위해 CSS가 당사 서버로 전송됩니다. 저장되지 않으며 페이지 링크에도 포함되지 않습니다.

관련 도구

ASCII 표 참조

NUL, LF, DEL 같은 제어 문자를 포함해 모든 문자에 대한 10진수, 16진수, 8진수, 2진수, HTML 숫자 문자 참조를 담은 0부터 127까지의 전체 ASCII 표.

HTML 문자 참조

HTML 엔티티의 검색 가능한 목록, 각 엔티티의 이름 및 숫자 코드, 그리고 특수 문자 및 기호에 대한 1클릭 복사 기능을 제공합니다.

키보드 단축키 참고표

macOS, Windows, Linux에서 VS Code, Chrome, GNU Readline을 쓰는 Bash의 문서화된 기본 단축키를 검색합니다.

보색 찾기

어떤 입력에 대해서도 보색을 찾습니다. HSL 반대 색, 분할 보색 쌍, 그리고 접근성 있는 조합 제안을 반환합니다.

랜덤 영어 글자 생성기

A-Z 영어 글자를 무작위로 생성합니다. 개수와 대문자, 소문자, 혼합 대소문자를 선택해 게임, 과제, 수업 활동에 활용하세요.

색상 이름 찾기

HEX, RGB 또는 HSL 값에 가장 가까운 표준 CSS 색상 이름을 CIEDE2000으로 찾습니다.

이 도구는 다른 언어로도 제공됩니다