# Tailwind Plus에 Vanilla JavaScript 지원 추가 > Clean Markdown view of GeekNews topic #22193. Use the original source for factual precision when an external source URL is present. ## Metadata - GeekNews HTML: [https://news.hada.io/topic?id=22193](https://news.hada.io/topic?id=22193) - GeekNews Markdown: [https://news.hada.io/topic/22193.md](https://news.hada.io/topic/22193.md) - Type: GN+ - Author: [neo](https://news.hada.io/@neo) - Published: 2025-07-27T10:01:20+09:00 - Updated: 2025-07-27T10:01:20+09:00 - Original source: [tailwindcss.com](https://tailwindcss.com/blog/vanilla-js-support-for-tailwind-plus) - Points: 1 - Comments: 1 ## Topic Body - **Tailwind Plus의 UI 블록**들이 이제 **Vanilla JavaScript**만으로 완전히 동작 가능해짐 - React, Vue 등 **프레임워크 없이도 대화형 컴포넌트**를 사용할 수 있게 됨 - **@tailwindplus/elements**라는 **커스텀 엘리먼트 기반 라이브러리**가 새롭게 제공됨 - 다양한 **플랫폼 및 프레임워크**와의 호환성을 갖춘 사용성 강조됨 - 모든 **Tailwind Plus 고객**은 지금 바로 이 기능을 사용할 수 있음 --- ### Tailwind Plus에서 Vanilla JavaScript 지원 도입 많은 Tailwind Plus UI 블록(예: **다이얼로그, 드롭다운, 커맨드 팔레트**)은 실질적으로 JavaScript가 동반되어야 실사용이 가능함. 기존에는 React 또는 Vue 사용자가 아닌 경우, 이러한 UI 블록의 상호작용을 위해 직접 JavaScript를 작성해야 했음. 하지만 이제는 모든 UI 블록이 **완전한 기능과 접근성, 인터랙티브 요소**를 갖추어 Plain HTML 예시에서도 즉시 동작함. 즉, JavaScript 프레임워크에 의존하지 않고도 [드롭다운](https://tailwindcss.com/plus/ui-blocks/application-ui/elements/dropdowns), [커맨드 팔레트](https://tailwindcss.com/plus/ui-blocks/application-ui/navigation/command-palettes), [다이얼로그](https://tailwindcss.com/plus/ui-blocks/application-ui/overlays/modal-dialogs), [드로어](https://tailwindcss.com/plus/ui-blocks/application-ui/overlays/drawers) 등 다양한 인터페이스 블록을 프로젝트 어디서든 활용할 수 있음. ### @tailwindplus/elements: 핵심 라이브러리 이 변화를 가능하게 한 것이 바로 **@tailwindplus/elements** 라이브러리임. 이 라이브러리는 [Tailwind Plus](https://tailwindcss.com/plus) 고객을 위한 전용 패키지로, **헤드리스 커스텀 엘리먼트** 모음집임. - 커스텀 엘리먼트들은 HTML 코드에 `<script>` 태그 한 줄만 추가하면 어디서든 적용 가능함 - 복잡한 상호작용, 포커스 관리, 키보드 접근성, ARIA 속성 부여 등이 자동 처리됨 - 스타일링은 Tailwind CSS 유틸리티 클래스나 직접 작성한 CSS로 자유롭게 커스터마이즈 가능함 ### 주요 활용 예시 - **드롭다운**: `<el-dropdown>`, `<el-menu>` 등 커스텀 엘리먼트로 구성하며, 별도 JavaScript 없이 동작함 - **셀렉트**: `<el-select>`, `<el-options>`, `<el-option>` 엘리먼트로 고급 선택 컴포넌트 구현 가능함 - **커맨드 팔레트**: `<el-command-palette>`, `<el-command-list>` 등 구조로 완전한 기능 구현됨 이 커스텀 엘리먼트들은 ARIA 속성, 포커스 이동, 키보드 내비게이션을 자동으로 처리해 웹 접근성까지 강력히 지원함. ### 프레임워크 통합 및 플랫폼 의존성 최소화 - HTML만 사용하는 환경은 물론 Svelte, Rails(Ruby on Rails), React 등 다양한 환경과 통합 가능함 - **Svelte** 예시: `<el-autocomplete>`에 양방향 바인딩 추가 예시 제공 - **Rails** 예시: 폼 제출 시 네이티브 폼 컨트롤처럼 `<el-select>` 값이 서버로 전송됨 - **React** 예시: 기존의 Headless UI, React Aria와 달리 프레임워크 종속성 없이 사용 가능함 ### 최신 웹 표준 및 브라우저 호환성 - Elements는 최신 웹 플랫폼 기능(Web Components, Custom Elements 등)을 적극 활용해 가벼운 구성 및 네이티브 경험 제공함 - 필요한 경우 polyfill도 자동으로 번들하여 **Tailwind CSS v4**와 동일한 브라우저 지원 범위 확보함 - 웹 표준이 널리 보급될수록 Elements의 용량도 자연스레 가벼워질 전망임 ### 진정한 범용성: "HTML이 곧 최소공배수" HTML은 모든 웹 프레임워크의 "최소공배수"로, Elements를 사용하면 Tailwind Plus의 HTML 기반 UI 블록이 어떤 환경에서도 일관되게 동작함 - Svelte, Rails, React 등에서 실제 활용 예시 및 코드 제공됨 ### 출시 및 접근 안내 - **Tailwind Plus 구독자**라면 즉시 모든 업데이트된 UI 블록과 Elements를 사용할 수 있음 - [드롭다운](https://tailwindcss.com/plus/ui-blocks/application-ui/elements/dropdowns), [커맨드 팔레트](https://tailwindcss.com/plus/ui-blocks/application-ui/navigation/command-palettes) 등 다양한 UI 카테고리별 데모 예제와 [Elements 공식 문서](https://tailwindcss.com/plus/ui-blocks/documentation/elements) 제공됨 - 프로젝트 요구에 맞게 원하는 방식으로 커스터마이즈 가능함 ### 마치며 이제 Tailwind Plus 사용자라면 원하는 어떤 환경이든, 복잡한 JavaScript 작성 없이 **강력하고 접근성 있는 UI**를 손쉽게 구현할 수 있음. ## Comments ### Comment 41847 - Author: neo - Created: 2025-07-27T10:01:20+09:00 - Points: 1 ###### [Hacker News 의견](https://news.ycombinator.com/item?id=44686317) - `<el-dialog-panel>` 처럼 길고 계층적인 Tailwind class 네이밍을 보면, 이제는 CSS뿐 아니라 또 다른 계층 구조 시스템도 익혀야 하는 상황임을 느끼게 됨 - 대규모 Tailwind 프로젝트를 열 때마다, 한 줄에 엄청나게 긴 class 속성 리스트가 나오는 걸 보면 항상 감탄하게 됨 ``` <div class="group relative w-full max-w-md mx-auto bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-lg p-6 md:p-8 transition-all duration-300 hover:shadow-xl hover:border-blue-500 dark:hover:border-blue-400"> ... </div> ``` - Tailwind 이전에는 만나는 모든 웹 디자이너가 이런 식의 시스템을 자기 방식대로 만들곤 했음 CSS가 이론적으로는 충분히 강력하고 Tailwind 없이도 충분히 가능함 하지만 실제로는 CSS의 큰 단점이 있음: 전력을 발휘하려면 의미론적 모델을 별도로 설계해야 하는데, 디자이너들은 문서 구조나 정보 설계 이상으로 분위기와 감정 출력에 집중하는 경우가 많음 이런 감정적인 개념을 논리적 규칙으로 마크업하는 게 매우 어렵거나 불가능함 Tailwind는 기존에 모두가 하던 것, 즉 “의미”에 대한 추상적 모델링 대신 그냥 `bold`, `red`처럼 바로 적용 가능한 규칙을 공식화한 것에 불과함 - 이런 코드를 보고 ‘와, 이게 정말 깔끔한 코드군!’ 이라고 말할 수 있는 사람이 어떻게 생기는지 의문이 듦 Tailwind가 어쩌다 이렇게 인기 많아졌는지 모르겠고, 순수 CSS를 배우는 게 진짜 좋다고 생각함 요즘 CSS는 정말 훨씬 더 좋아짐 - 실제 프로젝트에서는 class들을 읽기 쉽게 그룹핑해서 쓰게 됨 예를 들면, ```
``` 이런 식으로 코딩함 현재는 수동으로 분류하지만, 이런 포맷을 자동화해주는 툴이 있었으면 좋겠음 - Tailwind는 원래 utility class 스타일 CSS 프레임워크, 일명 “Bourbon on Steroids(강화 버전의 Bourbon)” 같은 개념에서 시작한 듯 함 그런데 사람들이 예제 코드를 생각보다 훨씬 더 흔쾌히 받아들였고, 그냥 그대로 쌓아서 쓰게 됨 2018년에 새로운 대규모 프로젝트에 Tailwind를 적용해봤는데, 예전엔 `.button`, `.button-primary` 처럼 Tailwind utility를 기반으로 클래스를 쌓으면 유지보수도 쉽고 HTML도 깔끔했음 하지만 팀이 직접 써보니 기본적으로 제공되는 유틸리티 클래스를 그냥 쌓는 게 훨씬 빠르고 쉬웠음 코드의 우아함을 신경 쓰지 않으면 디자인도 일관되고 Photoshop에서 본 대로 똑같이 구현 가능했음 [Bourbon 참고](https://www.bourbon.io) - 웹 표준 기반 Web Components를 사용한 방식임 브라우저 기본 지원이라 JS 프레임워크 없이도 작동함 개발자가 Web Components를 많이 활용하게 된 점이 반가움 [Web Components란? (MDN)](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) - 오랫동안 기다려온 변화임 예전에는 호환성 신경 안 쓸 때 개인 프로젝트에서 Web Components를 가지고 놀았는데, 이제 메인스트림 라이브러리에서도 도입하는 것이 정말 반가움 - 12년간 Web Components의 필요성을 말해왔지만 React, Angular, Svelte 등 프레임워크 진영에서는 반응이 시큰둥했음 웹 컴포넌트와 범위 지정 JS/TS와 번들러(vite 또는 rollup 정도)면 충분하고, Shadow DOM이나 전체 리렌더링처럼 쓸데없는 오버헤드는 필요 없음 - 2014년쯤 Polymer를 가지고 놀았을 때 “transclusion”이라는 용어가 인상적이었음 그 때는 뭔가 신기했는데 지금은 뜻도 잘 기억 안 남 - 회사 광고 코드용 hook에서 Web Components를 적용해봤는데, 개인적으로는 좀 실망스러웠음 코드 실행 트리거는 쉽지만, API 자체는 별로 좋지 않음 - 인기 UI 컴포넌트 세계를 보면 왜 베이스가 모두 ‘headless’가 아니었는지 궁금했음 오래전부터 Web Components가 있었는데 이런 접근이 흔하지 않았던 게 의아했음 프레임워크 별(SHADCN 등) 라이브러리들은 버전 호환에 따라 각자 따로 문서도 만들고, 특정 환경에만 얽매여 실제로는 완성도도 낮음 Headless UI를 베이스로 만들어 두고, 필요하다면 프레임워크별 래퍼를 만드는 방식이 더 나을 듯 함 물론 더 복잡한 사정이 많은 걸 알지만, 이런 세상을 꿈꿔봄 - React, Vue, Svelte 등 인기 프레임워크에서는 Web Components가 번들 사이즈나 런타임 부담 측면에서 그냥 오버헤드임 특히 React에서는 세계관의 불일치 때문에 기능이나 사용성에서 손해를 감수하거나, 아니면 정교한 바인딩을 만들어야 해서 애초에 Web Components 쓸 이유가 사라짐 SSR 같은 고급 기능에서도 문제 생기는 경우 많음 React가 지배적인 상황에서 굳이 Web Components를 쓰고 싶지는 않음 그리고 Headless 방식은 종종 실 구현이 복잡하거나 오버헤드가 큼 - 누군가 Tailwind 팀에 충분한 자금을 지원해줄 수 있다면, 돈 걱정 없이 모든 Tailwind 생태계를 무료로 제공받을 수 있어서 세상이 훨씬 좋아질 거라는 상상을 해봄 Tailwind Plus 같은 다양한 곳과의 깊은 통합 기회가 너무 많이 사라진 게 아쉬움 예전 37signals가 Jeff Bezos에게 투자받아 VC 걱정에서 자유로워졌던 사례가 떠오름 - Tailwind 팀은 이미 상상 이상으로 성공적인 상태임 더 많은 걸 만들고 확장하려는 건 돈이 필요해서가 아니라 자연스러운 야망 때문임 내 인상으로는 Tailwind(오픈소스)가 전체 비즈니스의 일부이고, 매출이 나는 또다른 프로젝트도 만들어가고 싶어함 Laravel과도 비교될 만함 - 솔직히 요즘은 AI로 Tailwind 컴포넌트를 쉽게 제너레이션할 수 있어서 Tailwind Plus 같은 유료 컴포넌트를 굳이 사고 싶은 마음이 덜함 예전 Tailwind UI 시절엔 실제로 돈 내고 샀지만, 요즘은 차라리 Claude 같은 AI에게 직접 UI를 만들어달라고 하면 라이센스 고민도 없어서 편함 앞으로 어떤 비즈니스 모델이 통할지 궁금함 - 37signals 관련해서, 개인적으로는 창업자가 누군가에게 보고하면서 일하는 게 오히려 더 나았을지도 모른다는 생각이 듦 - 사실 “Tailwind의 모든 경험”은 이미 무료로 제공되고 있음 부족한 깊은 통합이란 게 뭔지 의문임 Tailwind Plus(상업 제품)는 그냥 오프더셸프(ready-made) 템플릿과 프리빌트 컴포넌트 세트임 빠르게 시작하려는 개발자에게 편리하지만, 결국 모든 건 Tailwind만 있으면 충분히 직접 만들 수 있음 - 구체적으로 어떤 통합을 의미하는 건지 궁금함 - 지금 너무 흥분하지 않는 게 좋을 듯 함 예전에는 Vue도 지원했는데 이제는 사실상 버려진 모양임 - 이게 바로 Vue 지원임 프레임워크가 워낙 많아서 모두에 맞는 커스텀 래퍼를 만드는 것은 불가능에 가까움 Web Components를 사용하면 한 번 개발해서 모든 환경에서 돌아가고, 결국 프레임워크가 Web Components 지원(곧 HTML 지원)을 잘하면 충분함 - Vue의 Web Components 지원은 매우 좋고, React 19도 마침내 잘 지원하기 시작함 Web Components 생태계가 엉망인 건 사실이지만, 이런 식으로 “모든 프레임워크에서 재사용 가능한 컴포넌트”를 제공하는 게 Web Components의 진정한 킬러앱임 이걸 “바닐라 자바스크립트용”이 아니라 “이제 모든 프레임워크 지원”이라고 홍보하지 않는 게 놀라움 - 그들은 Figma 디자인 라이브러리도 운영했는데 지금은 없어짐 디자이너와 협업하려면 참 아쉬운 사례임 - 이름 그대로 tailwindcss를 지향함 - 커스텀 엘리먼트의 이런 활용 사례가 흥미롭다고 생각했는데, Tailwind에서는 이게 유료 기능이라 좀 황당함 감각적으로는 커스텀 엘리먼트는 무료고 프레임워크 연동만 유료가 더 자연스러울 거라 기대함 [Tailwind Plus 가격정책](https://tailwindcss.com/plus#pricing) - 약 $250,000 들여 이 라이브러리를 개발했기 때문에 유료임 그냥 무료로 제공하고 유지보수하려면 불가능했을 것이고, 실력 있는 엔지니어들이 정당한 보상을 받아야 함 - Tailwind Plus는 UI 컴포넌트 및 템플릿 모음 유료 컬렉션임 TailwindCSS 본체는 Bootstrap처럼 스타일링 도구에 불과함 - 또다른 유료 기능으로 [SSO](https://sso.tax/) 같은 것도 유명함 왜 유료인지 직관적으로 납득이 안 가지만, 의도적으로 도입 의사 결정 시기를 늦추려는 전략임 - 이런 걸 유료로 파는 게 좀 이상함 무료가 기본인 웹 개발 세계에서 프레임워크를 평생 사용하려면 구독료를 내야 하는 구조면 이상할 수 있음 마치 Postgres가 월 별 사용료를 요구하는 상황 같음 하지만 가격 정책을 보니 평생 한 번 구매하는 구조이긴 함 이 방식이 얼마나 잘 통할지 궁금함 - Alpine.js가 tailwindcss plus의 custom block elements에서 사라진 것 같음 코드 예시에 더 이상 alpinejs가 안 나오는 걸 보고 실망임 이제는 ``` <!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> --> ``` 이런 식으로 대체됨 알파인 썼던 입장에서 복붙 예제를 사용할 수 없게 되어 아쉬움 - 이 기능은 tailwind 무료 사용자에게도 꼭 열려 있으면 좋겠음 매우 흥미롭고 한 번 써보고 싶은데 무료로는 체험조차 안 되는 게 아쉬움 그래도 오픈소스는 항상 후원이 쉽지 않다는 걸 알기 때문에 tailwind에 감사를 표함 언젠가는 오픈소스에 기부하고, 기여하는 사람이 되고 싶음 - `<el-command-palette>`처럼 Elements에 고급 명령 팔레트 같은 걸 만들 수 있다고 하는데, 실제로 저 기능을 그 컴포넌트로 직접 추가한 것이어서 가능해진 것임 - 최근 Tailwind를 더 많이 사용해 보면서 편의성과 디자인 시스템 설계의 번거로움을 추상화해주는 강점이 있다는 걸 인정하게 됨 하지만 장기적으로 볼 때, 직접 디자인 시스템과 컴포넌트 라이브러리에 투자하는 것이 DX, 유연성, 미적 언어, 의존성 측면에서 훨씬 더 충실한 솔루션이 됨