Tailwind Play 소개

Tailwind를 최대한 활용하려면 빌드 단계가 필요합니다. tailwind.config.js 파일을 커스터마이징하거나, @apply로 컴포넌트를 추출하거나, 플러그인을 포함시키려면 이 방법밖에 없습니다.

이미 프레임워크를 사용 중이라면 문제가 되지 않지만, 처음 사용해보려는 경우에는 진입 장벽이 높습니다. PostCSS를 지원하는 로컬 개발 환경을 설정하거나, 정적 CDN 빌드를 사용해야 하는데, 이 경우 많은 멋진 기능을 사용할 수 없게 됩니다.

그래서 오늘 우리는 Tailwind Play의 첫 번째 버전을 발표하게 되어 기쁩니다. Tailwind Play는 Tailwind CSS의 모든 빌드 타임 기능을 브라우저에서 직접 사용할 수 있는 고급 온라인 플레이그라운드입니다.

Tailwind Play는 Tailwind의 가장 멋진 기능들을 모두 지원하며, 에디터보다 더 나은 기능들도 제공합니다. 예를 들어:

• Tailwind 테마 커스터마이징
• group-hover나 focus-within 같은 특수 변형 활성화
• CSS에서 @apply, @variants, @responsive 같은 커스텀 지시문 사용
• @tailwindcss/typography 같은 플러그인 추가
• 지능형 코드 완성 및 린팅
• 반응형 디자인 모드
• 원클릭 공유

코드 완성 기능은 렌더링된 미리보기를 실시간으로 업데이트합니다. 이는 브라우저에서 놀라운 디자인 워크플로를 가능하게 합니다. 예를 들어, 화살표 키로 다양한 패딩 유틸리티를 탐색하면서 파일을 저장하거나 엔터를 누르지 않고도 완벽한 값을 찾을 수 있습니다.

반응형 디자인 모드는 Chrome DevTools처럼 뷰포트를 미세 조정할 수 있게 해줍니다. 사용 가능한 공간을 넘어서 뷰포트를 드래그하면 미리보기 영역이 자동으로 축소되어, 제한된 공간에서도 큰 화면을 위한 디자인이 가능합니다.

원클릭 공유는 정말 간단합니다. 계정을 만들 필요도 없습니다. “공유”를 클릭하면 작업 중인 내용의 스냅샷 링크가 즉시 생성되어 온라인으로 공유할 수 있습니다.

**play.tailwindcss.com**에서 확인해보고 의견을 알려주세요!

이 글에 대해 이야기하고 싶으신가요? GitHub에서 토론하기 →