Tailwind 按鈕產生器
產生有尺寸、樣式、圖示、寬度、焦點、hover 與停用狀態的可及按鈕。
tailwind-button-generator本機處理
正在啟用本機工具…
Tailwind v4 工作台
預覽使用原生 CSS，不載入 Tailwind runtime。修改即在本機更新結果；文字與設定僅留於頁面記憶體。
轉換器採常見且明示的規則。保留 arbitrary 值與 modifier 字元；未知 tokens 標示未支援。實際 cascade、自訂主題及外掛須用 Tailwind 建置核對。
預覽與輸出
結果已在本機更新。套用至專案前請核對。
檢查提示
- 文字對比 5.17:1；AA 一般文字通過。
Classes
預覽最多 32,000 字元；複製、下載與展開文字均保留完整內容。複製失敗時可選取完整文字。
inline-flex items-center justify-center gap-2 px-4 py-2 text-base rounded-lg font-semibold focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 disabled:opacity-50 disabled:cursor-not-allowed bg-[#2563EB] text-white hover:brightness-90
展開可選取的完整文字
inline-flex items-center justify-center gap-2 px-4 py-2 text-base rounded-lg font-semibold focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 disabled:opacity-50 disabled:cursor-not-allowed bg-[#2563EB] text-white hover:brightness-90
HTML
預覽最多 32,000 字元；複製、下載與展開文字均保留完整內容。複製失敗時可選取完整文字。
<button class="inline-flex items-center justify-center gap-2 px-4 py-2 text-base rounded-lg font-semibold focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 disabled:opacity-50 disabled:cursor-not-allowed bg-[#2563EB] text-white hover:brightness-90" type="button"><span>儲存變更</span></button>
展開可選取的完整文字
<button class="inline-flex items-center justify-center gap-2 px-4 py-2 text-base rounded-lg font-semibold focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 disabled:opacity-50 disabled:cursor-not-allowed bg-[#2563EB] text-white hover:brightness-90" type="button"><span>儲存變更</span></button>
如何使用這個工具
調整有標籤的控制項，即時更新原生 CSS 預覽，並複製或下載 Tailwind v4 輸出。範例與重設僅存於頁面記憶體。
不適合用在什麼情況
不載入 Tailwind runtime，也不是完整編譯器。轉換器支援明示常見子集，未知 utility 會列出。衝突與暗色建議須在實際建置專案核對。輸入上限 16,000 UTF-8 bytes、1,000 classes；不執行程式或輸入 HTML。