ハクソク

世界を動かす技術を、日本語で。

Tailwind PlusのバニラJavaScriptサポート

2025年7月26日原文(tailwindcss.com)

概要

  • Tailwind Plus のUIブロックが JavaScript不要 で利用可能に
  • @tailwindplus/elements としてカスタム要素ライブラリを提供
  • React/Vue不要 でどんなプロジェクトにも組み込み可能
  • アクセシビリティ・インタラクション も自動でサポート
  • 最新Web標準 を活用しつつ幅広いブラウザ対応

Tailwind PlusのUIブロックがJavaScript不要で使える新時代

  • Tailwind Plus の多くのUIブロック（ダイアログ、ドロップダウン、コマンドパレット等）は、これまで 複雑なJavaScript実装が必要
  • ReactやVue のユーザー以外にとっては導入のハードルが高い状況
  • 本日より、 全てのUIブロックが完全な機能性・アクセシビリティ・インタラクション を持つように進化
  • プレーンなHTML例 も含め、どんなプロジェクトでも JavaScriptフレームワーク不要 で利用可能
  • ドロップダウン、コマンドパレット、ダイアログ、ドロワー等、 どのUIも即座に導入可能

@tailwindplus/elementsとは

  • @tailwindplus/elements はTailwind Plus専用の カスタム要素ライブラリ
  • Headless Custom Elements による実装で、 HTMLだけで高度なUI構築 が可能
  • ユーティリティクラスやカスタムCSS で自由にスタイリング
  • 特定のJavaScriptフレームワークに依存しない ため、どんな環境でも利用可能
    • <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script>をHTMLに追加するだけ

主要なカスタム要素の使い方例

  • <el-dropdown>や<el-menu>で カスタムドロップダウンメニュー を実装
  • <el-select>や<el-options>で カスタムセレクトボックス を構築
  • <el-dialog>や<el-command-palette>で コマンドパレットやモーダルダイアログ を実現
  • これらの要素は ARIA属性管理、フォーカス制御、キーボード操作 なども自動対応

Elementsで提供される主要プリミティブ

  • Autocomplete ：カスタムコンボボックス等の実装
  • Command Palette ：コマンドパレットの構築
  • Dialog ：モーダルダイアログ、ドロワー等の実装
  • Disclosure ：FAQやナビゲーションバーのモバイルメニュー等
  • Dropdown menu ：カスタムドロップダウン
  • Popover ：フライアウトメニュー等
  • Select ：カスタムセレクトメニュー
  • Tabs ：タブUI（テキストエリアや商品概要など）

最新Web標準の活用

  • Custom Elements でクロスプラットフォームなコンポーネント抽象化
  • popover属性 でオーバーレイ管理、 beforetoggle でトランジション制御
  • ネイティブ<dialog>要素 でフォーカストラップ＆トップレイヤーレンダリング
  • Invokerコマンド でディスクロージャ等のインタラクションを宣言的に管理
  • ElementInternals でカスタムフォームコントロールのネイティブ互換性確保
  • 必要な Polyfill も同梱し、Tailwind CSS v4.0対応ブラウザ全てで動作保証

どの環境でも動作するコンポーネント

  • HTMLが全てのWebフレームワークの共通基盤 であることを活用
  • Elements によって、どんなプロジェクト・技術スタックでも 高度なUIが簡単に導入可能
  • Tailwind Plus ユーザーは Elementsドキュメント で詳細や実例を確認可能

Tailwind Plus のUIブロックは、 @tailwindplus/elements によってあらゆるプロジェクトで 簡単・安全・アクセシブル に使える時代に突入。今後も Web標準の進化 とともに、より軽量・高機能なUI体験を提供予定。

Hackerたちの意見

「Elementsを使えば、カスタムコマンドパレットみたいな高度なものも作れるよ。」そうそう、あれを実現するための機能が追加されたからね。

これはカスタム要素の面白い使い方だね。最初からTailwindはこういう風に実装されるべきだったと思うけど、まさか有料機能とは！(https://tailwindcss.com/plus#pricing) 直感的には、カスタム要素は無料で、フレームワークの統合が有料になると思ってた。

└

Tailwind Plusは、有料のUIコンポーネントとテンプレートのコレクションなんだ。TailwindCSS自体は、Bootstrapみたいなスタイリングツールに過ぎないよね。

└

うん、これが有料になるのは変な感じだね。ウェブ開発の世界では、ほとんどのものが無料なのに、UIフレームワークに縛られてサブスクリプションを払い続けるなんて、ちょっと無茶だよね。まるでPostgresが月額料金を要求してくるみたい。編集：今見たら、彼らの価格設定は一回限りの永久アクセスなんだね。それでも、このモデルがどれだけうまくいくのか、本当に気になる。

└

もう一つ面白い有料機能は、https://sso.tax/ なんだけど、ユーザーにとっては直感的じゃないから笑えるよね。でも、それは意図的なんだ。彼らは、開発者が製品にかなり投資した後に決断を促すポイントを探してるんだ。

└

ありがとう！これは有料機能なんだ。ライブラリの開発に約25万ドルかけたからね。もしただ無料で配って、ずっとメンテナンスするつもりだったら、作れなかったよ。うちのエンジニアは優秀な人たちで、ちゃんと報酬をもらうべきだと思う。

標準ベースのウェブコンポーネントを使ってるみたいだね[0]。ページには、これらのコンポーネントは既存のJavaScriptフレームワークを必要としないって書いてある。ブラウザにウェブコンポーネントのサポートが組み込まれてるから。開発者がウェブコンポーネントを取り入れてるのを見るのは嬉しいね。[0]: https://developer.mozilla.org/en-US/docs/Web/API/Web_compone...

└

これが実現するまでにすっごく時間がかかったな。数年前、互換性を気にせずに個人的なプロジェクトでウェブコンポーネントをいじってたのを思い出すよ。メインストリームのライブラリがやっと取り入れ始めたのは嬉しいね。

└

うちの会社の広告コードではウェブコンポーネントを使ってるけど、個人的にはかなりがっかりしてる。コード実行を簡単にトリガーできるけど、APIがあんまり良くないんだよね。

└

2014年頃にPolymerをいじってたのを思い出すな。なぜか「トランスクリュージョン」って言葉が頭に浮かんでくるけど、その時はワクワクしてた記憶があるよ。今はその意味をほとんど忘れちゃったけどね。

└

12年間これを言い続けてる…12年、マジで。Reactの卒業生たちは俺を変な目で見るし、Angularの開発者は必要ないって言うし、Svelteの兄弟たちは「消えろ」って感じ。誰かが注目してくれてるのが嬉しいよ。シャドウDOMはいらないし、単純な値が変わったときに全てを再レンダリングする必要もない。ウェブコンポーネントとスコープ付きのjs/ts、viteか使ってるロールアップがあれば十分だよ。

誰かがTailwindの人たちにお金をドンと投げて、彼らが金銭面を心配せずにフルTailwind体験を無料で提供できるようになったら、世界はもっと良くなると思う。他のプロジェクトとの深い統合のチャンスがたくさん失われてるし。まるでジェフ・ベゾスが37signalsにすごい評価額でお金を投げたみたいで、それが彼らをVCの罠から完全に救ったんだよね。

Hacker Newsで議論の続きを見る