Tailwind Playground
Tailwind CSS 클래스를 실시간으로 테스트하고 미리보기할 수 있습니다.
설정
요소 타입과 내용을 설정하세요
프리셋 예제
자주 사용되는 스타일 조합을 빠르게 적용해보세요
Button
Card
Badge
Alert
Input
미리보기
실시간으로 스타일이 적용된 결과를 확인하세요
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>
💡 사용 팁
자주 사용되는 클래스:
- •
hover:- 호버 상태 스타일 - •
focus:- 포커스 상태 스타일 - •
active:- 활성 상태 스타일 - •
transition-colors- 색상 전환 효과
반응형 클래스:
- •
sm:- 640px 이상 - •
md:- 768px 이상 - •
lg:- 1024px 이상 - •
xl:- 1280px 이상