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가 당사 서버로 전송됩니다. 저장되지 않으며 페이지 링크에도 포함되지 않습니다.

관련 도구

보색 찾기

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

Webpack 설정 생성기

순수 JavaScript, React, Vue용 webpack 5 webpack.config.js를 만드세요. TypeScript, Babel, CSS 또는 Sass, 이미지, HtmlWebpackPlugin, 개발 서버, npm install 명령까지 함께 제공합니다.

XML 포매터

일관된 들여쓰기로 XML 문서를 정렬 출력하고, 정확한 줄 번호로 적격성 오류를 잡아냅니다.

텍스트 파일 인코딩 변환기

깨진 문자를 고치기 위해 텍스트를 UTF-8, UTF-16, Latin-1, Windows-1252 등 여러 인코딩 사이에서 변환하세요.

Protocol Buffers 디코더

hex, Base64, Base64URL, 텍스트 또는 파일의 Protobuf 와이어 형식 바이트를 브라우저에서 디코딩하고 정확한 필드 후보를 확인한 뒤 비공개 보고서로 내보냅니다.

색상 혼합기

두 HEX 색상을 2-20개의 균등한 색상 견본으로 섞습니다. 양 끝 색상을 포함해 각 중간 색상을 대문자 HEX 코드로 확인하세요.

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