重點整理
- @tailwindplus/elements 讓 Tailwind Plus 所有 UI 元件支援純 HTML 與原生 JavaScript。
- 開發者不用學 React 或 Vue，只要引入 script 標籤就能使用互動元件。
- 元件內建無障礙支援，包含鍵盤操作、焦點管理與 ARIA 屬性。
- 支援下拉選單、對話框、指令面板、頁籤等多種常見互動元件。
如果你曾經想用 Tailwind Plus 的漂亮 UI 模板，卻因為不會寫 React 或 Vue 而卡關，現在有好消息了。Tailwind 官方正式推出 @tailwindplus/elements，讓所有互動元件只需要純 HTML 就能運作，不用再被前端框架綁手綁腳。
為什麼這件事對中小企業很重要？
很多中小企業在架設官網或電商網站時，會請工程師使用現成的 UI 模板來加快開發速度。但過去 Tailwind Plus 的互動元件（例如下拉選單、對話框、指令面板）需要搭配 React 或 Vue 才能運作，這意味著你的網站必須導入整個前端框架，增加開發與維護成本。
現在有了 @tailwindplus/elements，只要你的網頁能放 <script> 標籤，就能使用這些互動元件。不管你的網站是用 WordPress、Shopify、純 HTML，還是其他 CMS，都能直接套用。
@tailwindplus/elements 是什麼？
這是一套專為 Tailwind Plus 客戶打造的 headless custom elements（無樣式自訂元素）函式庫。所謂 headless，是指它只負責元件的互動行為，不包含外觀樣式，你可以用 Tailwind 的 utility classes 自由調整設計。
它的運作原理是利用瀏覽器原生的 Custom Elements（自訂元素）技術，把複雜的互動邏輯封裝成自訂 HTML 標籤。例如：
<el-dropdown>：下拉選單<el-select>：自訂下拉選取框<el-dialog>：對話框或抽屜選單<el-command-palette>：指令面板（類似搜尋快捷鍵）<el-tabs>：頁籤切換<el-popover>：彈出式選單
這些元件內建無障礙支援，包含鍵盤操作、焦點管理、ARIA 屬性自動處理，讓你的網站對所有使用者都更友善。
實際使用有多簡單？
你只需要在 HTML 檔引入一行 script 標籤：
<script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script>然後就可以直接用自訂標籤來建立互動元件。例如做一個下拉選單：
<el-dropdown>
<button>Options</button>
<el-menu>
<a href="#">Account settings</a>
<a href="#">Support</a>
</el-menu>
</el-dropdown>整個過程不需要寫任何 JavaScript，也不用安裝額外的套件。對於沒有前端工程師團隊的中小企業來說，這大幅降低了技術門檻。
崴米的建議
- 評估現有網站是否適合導入：如果你的官網或電商網站目前使用 Tailwind CSS，可以請工程師評估導入 @tailwindplus/elements，快速增加互動功能而不需重構整個前端架構。
- 優先處理高互動需求頁面：例如下拉選單、篩選器、搜尋指令面板等，這些元件能提升使用者體驗，也能讓網站看起來更專業。
- 注意無障礙與瀏覽器相容性：雖然 Elements 已內建無障礙支援並提供 polyfill，但上線前仍建議在不同裝置與瀏覽器測試，確保所有使用者都能順利操作。
