Tailwind CSS:實用優先的 CSS 框架和 API,用於快速響應式設計

Tailwind CSS 框架

雖然我每天都在深入研究技術,但我沒有太多時間來分享我公司為客戶實施的複雜集成和自動化。 同樣,我沒有太多的探索時間。 我寫的大部分技術都是尋求 Martech Zone 涵蓋它們,但每隔一段時間 - 特別是通過 Twitter - 我看到一些關於我需要分享的新技術的嗡嗡聲。

如果您從事網頁設計、移動應用程序開發,甚至只是建立一個內容管理系統,您可能已經與跨多個樣式表的競爭樣式的挫折作鬥爭。 即使在每個瀏覽器中內置了驚人的開發工具,跟踪和清理 CSS 也需要太多的時間和精力。

CSS框架

近年來,設計師在發布已準備就緒並可供使用的款式系列方面做得非常出色。 這些 CSS 樣式表更廣為人知的是 CSS 框架,它試圖容納所有不同的樣式和響應能力,以便開發人員可以只引用一個框架,而不是從頭開始構建 CSS 文件。 一些流行的框架是:

  • 引導 – 一個發展了十多年的框架,首先由 Twitter 推出。 它提供了無數的功能。 它確實有缺點,需要 SASS,難以過度使用,依賴於 JQquery,並且加載起來非常繁重。
  • 布爾瑪 – 一個對開發人員友好且不依賴於 JavaScript 的干淨框架。
  • 粉底 – 一個更通用和可用的 CSS 框架,它擁有大量易於定制的組件。 此外,還有 電子郵件基礎運動UI 用於動畫。
  • UI套件 – HTML、JavaScript 和 CSS 的組合,可讓您快速輕鬆地開發前端。

Tailwind CSS 框架

雖然其他框架在適應流行的用戶界面元素方面做得很好,但 Tailwind 使用了一種稱為 原子 CSS. 簡而言之,Tailwind 使用自然語言巧妙地組織了類名,以實現他們所說的。 因此,雖然 Tailwind 沒有組件庫,但僅通過引用 CSS 類名即可輕鬆構建強大的響應式界面的能力是優雅、快速且無與倫比的。

這裡有一些非常棒的例子:

CSS網格

css 列開始網格列

CSS 漸變

css漸變

用於暗模式支持的 CSS

CSS暗模式

Tailwind 也有很棒的 擴展可用 用於 VS Code,以便您可以輕鬆地從 Microsoft 的代碼編輯器中識別和插入類。

更巧妙的是,Tailwind 在為生產構建時會自動刪除所有未使用的 CSS,這意味著您的最終 CSS 包可能是最小的。 事實上,大多數 Tailwind 項目向客戶端交付的 CSS 都不到 10kB。

你覺得呢?

本網站使用Akismet來減少垃圾郵件。 了解您的評論如何處理.