資源
建立精采 Tailwind CSS 網站所需的一切
我們認為 Tailwind 是個很棒的 CSS 架構,但您需要的不僅僅是一個 CSS 架構才能製作出視覺上令人驚豔的作品。
設計資源
設計很困難,因此我們製作了一些資源來協助您。這些資源是協助您設計的好方法,也是支援架構開發的好方法。
重構 UI
學習 UI 設計
了解更多, 重構 UI重構 UI 是由 Adam Wathan 和 Steve Schoger 共同製作的設計師開發人員書籍 + 影片系列。它涵蓋了我們所知道的所有讓事物看起來很棒的方法。
到目前為止,已有將近 10,000 人使用它,並且對它如何幫助他們改善工作有各種很棒的說法。
Tailwind UI
由 Tailwind CSS 的創作者精心打造的漂亮 UI 元件
了解更多, Tailwind UITailwind UI 是專業設計、預先建置、完全回應的 HTML 程式碼片段集合,你可以將其放入 Tailwind 專案中。
目前有超過 550 個元件可供使用,分為三種類別(行銷、應用程式 UI 和電子商務),而且我們會持續新增更多元件。
其他資源
Tailwind 並非我們維護的唯一開源專案。我們製作了一些其他資源,協助你進行設計和開發工作流程。
Heroicons由 Tailwind CSS 製作的漂亮手工 SVG 圖示。
了解更多, 由 Tailwind CSS 製作的漂亮手工 SVG 圖示。一套 450 個以上的免費 MIT 授權 SVG 圖示。可用作基本 SVG 圖示,或透過第一方 React 和 Vue 函式庫使用。
Hero Patterns由 Tailwind CSS 製作的無縫 SVG 背景圖樣。
了解更多, 由 Tailwind CSS 製作的無縫 SVG 背景圖樣。超過 100 個免費 MIT 授權的高品質 SVG 圖樣集合,供你在網路專案中使用。
螢幕錄影
前往我們的官方 YouTube 頻道,深入了解數十個影片,教你從 Tailwind 基礎知識到進階概念的所有內容。
基礎知識將自訂設計系統轉換為 Tailwind CSS
了解如何設定 Tailwind,為專案量身打造專屬的實用框架。
基礎知識將 Tailwind CSS 加入現有專案
了解如何將 Tailwind CSS 加入現有專案,而不會遇到命名衝突或特殊性問題。
我們的建構方式使用 Tailwind CSS、Shopify 和 Next.js 建構無頭電子商務商店
使用 GraphQL API 從 Shopify 商店擷取產品,並使用 Tailwind UI 組合頁面。
建立連結並貢獻
無論您是新手或進階使用者,參與 Tailwind 社群都是一個與志同道合的人建立連結的好方法,他們正在使用這個框架建構很棒的東西。