Tailwind Playground

Tailwind CSS 클래스를 실시간으로 테스트하고 미리보기할 수 있습니다.

설정

요소 타입과 내용을 설정하세요

요소 타입

내용

Tailwind 클래스

프리셋 예제

자주 사용되는 스타일 조합을 빠르게 적용해보세요

ButtonCardBadgeAlertInput

미리보기

실시간으로 스타일이 적용된 결과를 확인하세요

Hello, Tailwind!

생성된 HTML

현재 설정으로 생성되는 HTML 코드입니다

<div className="bg-blue-500 text-white p-4 rounded-lg shadow-md hover:bg-blue-600 transition-colors">Hello, Tailwind!</div>

💡 사용 팁