Tailwind를 최대한 활용하려면 빌드 단계가 필요합니다. 이는 tailwind.config.js 파일을 커스터마이징하거나, @apply로 컴포넌트를 추출하거나, 플러그인을 포함할 수 있는 유일한 방법입니다.
이미 프레임워크를 사용 중이라면 문제가 되지 않지만, 처음 사용해보려는 경우에는 상당한 진입 장벽이 있습니다. PostCSS를 지원하는 로컬 개발 환경을 설정하거나, 정적 CDN 빌드를 사용해야 하는데, 이 경우 많은 멋진 기능을 사용할 수 없게 됩니다.
그래서 오늘 우리는 Tailwind Play의 첫 번째 버전을 발표하게 되어 기쁩니다. Tailwind Play는 Tailwind CSS의 모든 빌드 타임 기능을 브라우저에서 직접 사용할 수 있는 고급 온라인 플레이그라운드입니다.
Tailwind Play는 Tailwind의 가장 멋진 기능들을 모두 지원하며, 다음과 같은 기능들은 Tailwind Play에서 더욱 뛰어납니다:
- Tailwind 테마 커스터마이징
group-hover나focus-within같은 특수 변형 활성화@apply,@variants,@responsive같은 커스텀 지시문 사용@tailwindcss/typography같은 플러그인 추가- 지능형 코드 완성 및 린팅
- 반응형 디자인 모드
- 원클릭 공유
코드 완성 기능은 렌더링된 미리보기를 실시간으로 업데이트하므로, 브라우저에서 놀라운 디자인 워크플로우를 경험할 수 있습니다. 예를 들어, 화살표 키로 다양한 패딩 유틸리티를 탐색하면서 파일을 저장하거나 엔터를 누르지 않고도 완벽한 값을 찾을 수 있습니다.
반응형 디자인 모드는 Chrome DevTools에서처럼 디자인 작업 중에 뷰포트를 세밀하게 조정할 수 있게 해줍니다. 사용 가능한 공간을 넘어서 뷰포트를 드래그할 수도 있으며, 미리보기 영역이 자동으로 축소되어 제한된 공간에서도 큰 화면을 위한 디자인을 할 수 있습니다.
원클릭 공유는 정말로 한 번의 클릭만으로 가능합니다. 계정을 만들 필요도 없습니다. "공유"를 클릭하면 작업 중인 내용의 스냅샷 링크가 즉시 생성되어 온라인에서 공유할 수 있습니다.
**play.tailwindcss.com**에서 확인해보고 의견을 알려주세요!
이 글에 대해 이야기하고 싶으신가요? GitHub에서 토론하기 →