Tailwind에서 CSS로

Tailwind CSS 유틸리티 클래스를 일반 CSS로 변환합니다. 각 클래스가 생성하는 스타일을 확인합니다.

Tailwind Classes

CSS Output

Supported: Display, Position, Flexbox, Text, Spacing (margin, padding, gap), Sizing (width, height), Border radius, Overflow, Cursor, and more.
Note: Colors require your Tailwind config for accurate conversion.

Tailwind CSS - 기술 세부 정보

Tailwind is a utility-first CSS framework. Each class maps to CSS properties: flex → display: flex, p-4 → padding: 1rem, text-red-500 → color: #ef4444. Responsive prefixes (md:, lg:) apply at breakpoints.

명령줄 대안

<!-- Tailwind classes -->
<div class="flex items-center p-4 bg-blue-500">

/* Generated CSS */
display: flex;
align-items: center;
padding: 1rem;
background-color: #3b82f6;

참조

공식 사양 보기