Tailwind 플레이그라운드
Tailwind CSS 클래스를 입력하면 라이브 미리보기와 해당 CSS 코드를 확인할 수 있습니다.
미리보기
미리보기 요소
생성된 CSS
.element { background-color: #3b82f6; color: #ffffff; font-weight: 700; padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 1rem; padding-right: 1rem; border-radius: 0.5rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); }
클래스 분석
bg-blue-500→background-color: #3b82f6
text-white→color: #ffffff
font-bold→font-weight: 700
py-2→padding-top: 0.5rem; padding-bottom: 0.5rem
px-4→padding-left: 1rem; padding-right: 1rem
rounded-lg→border-radius: 0.5rem
shadow-md→box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)
Tailwind 플레이그라운드 안내
이 무료 온라인 Tailwind CSS 플레이그라운드는 유틸리티 클래스를 입력하면 라이브 미리보기와 해당 CSS 코드를 즉시 보여줍니다. 스페이싱, 타이포그래피, 색상, 테두리, 플렉스, 그리드 등 주요 클래스를 지원합니다.
기능
- Tailwind 클래스 → CSS 속성 실시간 변환
- 라이브 미리보기로 스타일 즉시 확인
- 8가지 프리셋 예시 (버튼, 카드, 뱃지 등)
- 인식되지 않은 클래스 하이라이트
- 원클릭 CSS 코드 복사
Related Tools
🎨CSS Minifier
Minify & beautify CSS✏️SVG Editor
Edit & optimize SVG🎬CSS Animation
Keyframe animation builder📋JSON Formatter
Format & validate JSON