僅 CSS Tailwind CSS 連結主要顏色、次要顏色、強調色和中性顏色變體。將滑鼠懸停在底線和普通樣式上。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
具有視覺層次結構和語意的連結元件樣式錨元素。 Frutjam 連結系統透過 Tailwind CSS 實用程式類別支援多種顏色、懸停效果、尺寸和裝飾選項。連結非常適合文字連結、導航和號召性用語元素，透過適當的焦點管理和下劃線切換選項來保持可訪問性標準。
僅 CSS，無需 JavaScript。 WCAG AA 可存取且與框架無關 - 可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
| 班級 | 類型 | 描述 |
|---|---|---|
| link | 根據 | 帶有底線和顏色的樣式錨 |
| link-hover | 風格 | 下劃線僅在懸停時可見 |
| link-xs | 尺寸 | 特小號 |
| link-sm | 尺寸 | 小的 |
| link-md | 尺寸 | 中（預設） |
| link-lg | 尺寸 | 大的 |
| link-xl | 尺寸 | 特大號 |
| link-2xl | 尺寸 | 2×特大號 |
| link-primary | 顏色 | 主要主題顏色 |
| link-secondary | 顏色 | 次要主題色 |
| link-accent | 顏色 | 強調主題顏色 |
| link-neutral | 顏色 | 中性主題色 |
| link-info | 顏色 | 訊息語意顏色 |
| link-success | 顏色 | 成功語意色 |
| link-warning | 顏色 | 警告語意顏色 |
| link-error | 顏色 | 錯誤語意顏色 |
基本用法
連結顏色
應用語意連結顏色來配合您的主題或傳達意義（例如使用 link-error 進行破壞性操作或使用 link-success 進行確認）。
html
1 2 3 4 5 6 7 8 | <a class="link link-primary">Primary link</a> <a class="link link-secondary">Secondary link</a> <a class="link link-accent">Accent link</a> <a class="link link-success">Success link</a> <a class="link link-info">Info link</a> <a class="link link-warning">Warning link</a> <a class="link link-error">Error link</a> <a class="link link-neutral">Neutral link</a> |
連結尺寸
縮放超連結以配合周圍的版式。這些實用程式類別的範圍從用於頁腳「合法」文字的超小到用於高影響力英雄部分的 2 倍大。
html
1 2 3 4 5 6 | <a class="link link-xs">Primary link</a> <a class="link link-sm">Secondary link</a> <a class="link link-md">Accent link</a> <a class="link link-lg">Success link</a> <a class="link link-xl">Info link</a> <a class="link link-2xl">Warning link</a> |
連結懸停狀態
預設情況下，您可以選擇隱藏下劃線並僅在懸停時顯示它。這是更簡潔的導覽選單和儀表板側邊欄的常見設計模式。
使用 Claude Code、Cursor 或其他 AI 編輯器？
Cherry MCP 為您的 AI 編輯器按需提供準確的 關聯 類別名稱和結構。不再有幻覺課程。