什麼是tweakcn?
tweakcn 是一個專為 shadcn/ui 組件設計的視覺主題編輯器,讓你能夠輕鬆自定義組件的外觀。不論你是設計師還是開發者,都能透過 tweakcn 的直觀界面調整顏色、字體和佈局,實時預覽效果,並即時生成 Tailwind CSS 代碼。不需要複雜的設置或簽名,就能快速打造出獨特且符合需求的主題。
tweakcn的特色是什麼?
- 色彩控制: 使用直觀的色彩選擇器來調整背景、文字和邊框顏色。
- 字體設置: 精細調節字體大小、粗細和文字轉換,創造完美的外觀。
- Tailwind v4 & v3 支持: 無縫切換 Tailwind v4 和 v3,支持多種色彩格式,包括 OKLCH 和 HSL。
- 對比檢查器: 內建對比度檢查工具,確保你的設計符合可訪問性標準。
- AI 主題生成: 只需提供一張圖片或一段文字提示,AI 就能迅速生成漂亮的主題。
tweakcn的使用案例有哪些?
- 網站設計: 快速創建與品牌形象一致的網站主題。
- 應用程序開發: 自定義應用程序的 UI 組件,使其更具吸引力。
- 原型設計: 在原型設計階段快速測試不同的設計方案。
- 團隊合作: 設計師和開發者可以共同使用 tweakcn 進行協作。
如何使用tweakcn?
- 選擇主題預設:從我們不斷擴展的庫中選擇你要自定義的主題。
- 視覺化自定義:使用直觀的界面調整顏色、尺寸、字體和其他屬性。
- 複製代碼:將生成的 Tailwind CSS 代碼直接複製到你的項目中。












