Tailwind에서 CSS로 변환기
Tailwind 유틸리티를 CSS 선언으로 확장.
이 도구 소개
자주 쓰이는 Tailwind 유틸리티를 CSS 규칙 블록으로 펼쳐 줍니다. hover:나 md: 같은 변형은 별도의 선택자나 미디어 쿼리가 필요하므로 참고 사항에만 표시됩니다.
사용 방법
컴포넌트에서 클래스를 복사해 변환을 실행한 뒤, 생성된 선언을 스타일시트로 옮기거나 디자인 토큰과 비교해 보세요. 인식하지 못한 유틸리티는 참고 사항에 남습니다.
예제
기본 예시는 레이아웃과 여백에 자주 쓰는 유틸리티로 구성되어 있습니다.
입력
flex items-center gap-4 p-6 rounded-lg bg-white shadow-lg text-gray-900 font-semibold출력
.element {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.5rem;
border-radius: 0.5rem;
/* …mapped declarations… */
}팁
유틸리티 뒤에 숨은 CSS를 익히거나 CSS 레이어를 함께 쓰는 팀에 특히 유용합니다.
알아 두면 좋은 점
어떤 Tailwind 클래스를 이해하나요?
실용적인 일부를 지원합니다. display와 position, flex 정렬, padding·margin·gap·크기용 간격 스케일, 글꼴 크기와 굵기, border-radius, 몇 가지 그림자, grid 열, 불투명도, z-index, 자주 쓰는 색 짧은 목록, w-[320px]·bg-[#38bdf8] 같은 임의 값입니다. 그 외에는 추측하지 않고 노트에 목록으로 보여 줍니다.
hover:, md: 같은 variant는 어떻게 되나요?
노트에서 알려 주기만 하고 펼치지는 않습니다. variant에는 선언을 감싸는 선택자나 미디어 쿼리가 필요하므로 스타일시트에서 직접 감싸 주세요.