Tailwind 놀이터

Tailwind 놀이터 사용 방법

이 놀이터는 공식 Tailwind CSS v4 브라우저 컴파일러를 전부 여러분의 기기에서 실행합니다. 왼쪽에 유틸리티 클래스를 붙인 일반 HTML을 입력하면, 컴파일러가 샌드박스 처리된 미리 보기 iframe 안에서 대응하는 CSS를 생성하고, 아래 패널에는 만들어진 스타일시트가 그대로 표시됩니다. 업로드는 없습니다. 컴파일러, 마크업, 초안 모두 브라우저 안에 머뭅니다.

1. 「템플릿」 선택기에서 시작점을 고르세요. Hero, 카드 그리드, 가격표, 빈 문서; 텍스트는 방문 사이에 자동으로 복원되기도 합니다.
2. 왼쪽 편집기에서 HTML을 편집하세요. Tab은 공백 두 개를 삽입하고, 입력을 멈춘 뒤 약 500 ms 후에 미리 보기가 다시 컴파일됩니다.
3. 「소프트 랩」을 켜고 끄며 줄바꿈 방식을 조절하고, 글자 크기 선택기로 편집기 텍스트 크기를 정하세요.
4. 「다크 미리 보기」를 켜면 미리 보기 문서에 dark 클래스가 추가되어 dark:bg-slate-900 같은 유틸리티가 즉시 반응합니다.
5. 「컴파일된 CSS」 패널에서 생성된 규칙을 읽고 필요할 때 「CSS 복사」로 복사하세요.
6. 원본 마크업은 「HTML 복사」로, 컴파일된 CSS가 인라인된 독립 파일은 「HTML 다운로드」로 받으세요. 오프라인에서 바로 열 수 있습니다.

다운로드 파일에 실제 스타일이 담기려면 최소 한 번은 컴파일되어야 합니다. 내보내기 전에 미리 보기를 한 번 렌더링해 두세요. 생성되는 CSS를 줄이려면 템플릿에서 쓰지 않는 요소를 지우세요. 패널은 항상 현재 마크업에 필요한 내용을 정확히 반영합니다.