Tailwind Plus는 ‘@tailwindplus/elements’라는 새로운 라이브러리를 통해 UI 블록의 기능성을 대폭 강화했습니다. 이 라이브러리는 Tailwind Plus 고객 전용으로 제공되며, 순수 HTML만으로 인터랙티브 UI를 구축할 수 있도록 지원합니다.
Elements 라이브러리의 주요 특징
- 헤드리스 커스텀 엘리먼트: 복잡한 UI 동작을 캡슐화하여, 개발자가 HTML과 유틸리티 클래스/커스텀 CSS만으로 자유롭게 스타일링하고 기능을 구현할 수 있도록 합니다.
- 프레임워크 독립성: 특정 JavaScript 프레임워크(React, Vue 등)에 종속되지 않으며,
<script>태그를 사용할 수 있는 모든 웹 환경에서 작동합니다. - 자동화된 접근성 및 상호작용성: ARIA 속성 관리, 포커스 처리, 키보드 지원 등 사용자 경험에 필수적인 요소들을 자동으로 처리하여 개발 편의성을 높입니다.
- 다양한 UI 블록 지원: 드롭다운, 셀렉트, 다이얼로그, 커맨드 팔레트 등 Tailwind Plus의 모든 인터랙티브 UI 블록을 JavaScript 코드 작성 없이 구현할 수 있습니다.
다양한 프레임워크 통합 예시
Elements는 HTML, Svelte, Rails, React 등 여러 프레임워크에서 유연하게 통합됩니다. 특히, Rails 환경에서는 <el-select>와 같은 커스텀 엘리먼트가 네이티브 폼 컨트롤처럼 form_with 헬퍼와 함께 작동하여 서버 사이드 렌더링 애플리케이션에서도 손쉽게 사용할 수 있음을 보여줍니다. 이러한 유연성은 HTML이 웹의 공통 분모라는 점과 Elements가 최신 웹 플랫폼 기능을 활용하여 경량화되고 네이티브에 가깝게 설계되었기 때문에 가능합니다.