Midjourney 創(chuàng)作，未來UI

Tailwind CSS 是一個(gè)為快速創(chuàng)建定制化 UI 組件而設(shè)計(jì)的實(shí)用型框架。與其他 CSS 框架或庫不同，Tailwind CSS 組件沒有預(yù)先設(shè)置好樣式。相反，您可以使用 Tailwind 的低級實(shí)用類來為 CSS 元素設(shè)置樣式，如 margin、flex、color 等。

自從 2017 年發(fā)布以來，Tailwind CSS 在開發(fā)者中越來越受歡迎，因?yàn)樗试S開發(fā)者創(chuàng)建獨(dú)特的 UI，而不被 UI kit 規(guī)則所束縛。然而，過多的選項(xiàng)可能會導(dǎo)致選擇恐慌。您可能想要參考現(xiàn)有的示例以快速開始適應(yīng)或獲得靈感。

Tailwind 組件和模板集提供完全響應(yīng)式的 UI 和頁面模板，以滿足這種需求。這些集合允許您將 HTML 片段復(fù)制粘貼到您的代碼庫中進(jìn)行使用或修改。其他開發(fā)者和組織創(chuàng)建了它們，以幫助您通過展示潛在的最終結(jié)果快速開始您的項(xiàng)目。

本文將向您介紹 10 個(gè)最好的免費(fèi) Tailwind CSS 組件集。如果您是 Tailwind CSS 的新手，您應(yīng)該從本文開始，了解如何使用 Tailwind CSS 樣式化組件。讓我們開始吧。

1. TailwindComponents

Tailwind Components 是一個(gè)開源區(qū)貢獻(xiàn)的UI集合站點(diǎn)，其中包括免費(fèi)和付費(fèi)的 Tailwind UI 模板和組件，可用于快速啟動新應(yīng)用程序、項(xiàng)目和落地頁。該套件包括使用 Tailwind CSS 設(shè)計(jì)的現(xiàn)成的下拉菜單、登錄、模態(tài)框、選項(xiàng)卡、輸入和選擇器。您也可以通過上傳您的組件來幫助該開源社區(qū)，供其他人使用。

要使用任何組件或模板，只需單擊它，即可跳轉(zhuǎn)到其頁面。您可以預(yù)覽它，然后下載它，在 GitHub 上進(jìn)行分支，或直接復(fù)制代碼。

https://tailwindcomponents.com/

2. TailBlocks

Tailblocks 是一個(gè)包含 60 多個(gè)極簡布局塊的資源站點(diǎn)，包括推薦信、團(tuán)隊(duì)介紹組件、步驟組件、統(tǒng)計(jì)組件、定價(jià)對比組件、英雄、頁眉、畫廊、頁腳、和電子商務(wù)相關(guān)組件。

Tailblocks 組件非常棒，因?yàn)樗鼈冎С职岛谀Ｊ?，并允許您從界面更改主要顏色。

Mert Curuken 創(chuàng)建并維護(hù)了該項(xiàng)目的 GitHub 存儲庫，該存儲庫已獲得超過 5.1k 的 star，并被克隆了 400 多次，非常受歡迎。

要使用布局塊，請選擇它，從顏色調(diào)色板中選擇一種顏色，選擇暗黑或淺色模式，然后單擊“查看代碼”按鈕，最后將其復(fù)制并粘貼到您的項(xiàng)目中。

https://tailblocks.cc/

3. Meraki UI

Meraki UI 是一個(gè)不斷成長的UI框架，包含 50 多個(gè)驚人的 Tailwind CSS 組件，支持 RTL 語言。

延伸閱讀：什么是RTL語言

RTL 指的是從右到左的文字書寫方向，也就是“右到左”（Right-to-Left）的縮寫。RTL 語言是一類書寫方向?yàn)閺挠业阶蟮恼Z言，例如阿拉伯語、希伯來語和波斯語等。在網(wǎng)站或應(yīng)用程序中，如果要支持RTL語言，需要對頁面布局和文字排版進(jìn)行特殊處理。

如果用戶的默認(rèn)瀏覽器語言設(shè)置為 RTL，Meraki UI 將反轉(zhuǎn)所有內(nèi)容，包括文本、滾動條、進(jìn)度條、按鈕等等。Khatab Wedaa 和 Mosab Ibrahim 創(chuàng)建了這個(gè) Tailwind UI框架集，其中包括警告提示、登錄表單、按鈕、卡片、下拉菜單、導(dǎo)航欄、分頁和頁腳。要使用任何組件，只需復(fù)制它，然后就可以使用了。

https://merakiui.com/

4. TailwindToolbox

Tailwind Toolbox 是一個(gè)插件、工具、生成器、套件和教程的資源站點(diǎn)，可以幫助您更好地使用 Tailwind CSS。Tailwind Toolbox 由 Amrit Nagi 創(chuàng)建和維護(hù)，其中包括約 45 個(gè)落地頁模板和 16 個(gè)組件等內(nèi)容。通過單擊“資源”按鈕，您可以將資源添加到收藏中。

Tailwind Made 確保了預(yù)期的 JavaScript 交互，例如打開和關(guān)閉模態(tài)框，除了 HTML 標(biāo)記之外的模板腳本。要使用腳本，請下載 CSS 模板或通過單擊模板或組件上的代碼來復(fù)制 Tailwind 組件的代碼。

https://www.tailwindtoolbox.com/

5. TailwindTemplates

Tailwind Templates 是一個(gè)不斷擴(kuò)大的免費(fèi) UI 組件庫，使用 Tailwind CSS 進(jìn)行樣式設(shè)計(jì)。它由 J-hiz 創(chuàng)建，包含超過 30 個(gè)獨(dú)特的組件設(shè)計(jì)，如警告提示、按鈕、卡片、表單、搜索輸入和模態(tài)框。目前，它只有組件，但很快將推出 CSS 模板。要使用任何組件，請先選擇父分類，然后復(fù)制您選擇的模板的代碼。

https://tailwindtemplates.io/

6. Lofi UI

Lofi UI 是一個(gè)大型的 Tailwind CSS 組件集合站點(diǎn)，具有極簡的設(shè)計(jì)風(fēng)格。低保真簡單地意味著這些組件被設(shè)計(jì)成可重復(fù)使用的，并且樣式較少，讓您可以添加自己的樣式并根據(jù)自己的喜好進(jìn)行定制。

換句話說，這些組件旨在盡可能高效地使用 HTML，同時(shí)依賴 CSS 使其有效。將這些 Tailwind 組件作為起點(diǎn)，您可以根據(jù)自己的需求構(gòu)建和自定義。Rob Stinson 創(chuàng)建并維護(hù)了 Lofi UI，現(xiàn)在提供了超過 40 個(gè)吸引人的 UI 組件和布局。單擊任何組件卡片即可使用它。

https://codepen.io/collection/DqLkab

7. Kometa UI Kit

Kometa UI Kit 是一個(gè) Tailwind CSS UI組件站點(diǎn)，包括超過 130 個(gè)組件和布局塊，涵蓋了多個(gè)類別，如導(dǎo)航、頁眉、價(jià)格、FAQ、內(nèi)容、團(tuán)隊(duì)、博客、統(tǒng)計(jì)和頁腳。所有的布局塊都是完全響應(yīng)式的，如首頁所述，并且可以作為基本的 HTML 片段或 React/Vue 組件使用。

Kometa 還維護(hù)了一個(gè)博客，在其中分享使用 Tailwind CSS 創(chuàng)建更具吸引力和突出用戶體驗(yàn)的想法和方法。Kometa UI 由 Kitwind 團(tuán)隊(duì)創(chuàng)建。要使用 Kometa UI Kit 中的任何組件，請進(jìn)入父類別，選擇一個(gè)變體，然后將代碼作為純 HTML、Vue 或 React 代碼復(fù)制。

https://kitwind.io/products/kometa/

8. Material Tailwind

Material Tailwind 是一個(gè)簡單的 Tailwind CSS 組件庫，使用了 Google 的 Material Design。它有許多使用 Tailwind CSS 類構(gòu)建的 React 和 HTML 組件，并符合 Material Design 的設(shè)計(jì)指南。Material Tailwind 允許您通過更改顏色、字體、樣式和其他任何內(nèi)容輕松定制 Tailwind CSS 組件，以滿足您的需求。

Material Tailwind 對一些框架有靈活性，但目前僅支持 React 和 HTML 組件。其他框架，如 Vue 和 Angular，將很快得到支持。

https://www.material-tailwind.com/

9. Flowbite

Flowbite 是一個(gè)使用 Tailwind CSS 實(shí)用類創(chuàng)建組件的開源組件庫。它提供了超過 400 個(gè)組件和交互特性，以及對暗黑模式和 Figma 設(shè)計(jì)系統(tǒng)的支持。它可以與各種當(dāng)前的前端開發(fā)框架一起使用，包括 React、Vue、Svelte、Laravel 和 Rails。Flowbite 是一個(gè)專業(yè)套餐，包括一個(gè)基于 Tailwind CSS 實(shí)用類的 Figma 設(shè)計(jì)系統(tǒng)，以及數(shù)百個(gè)開發(fā)的頁面和組件，如應(yīng)用程序 UI、營銷 UI 和電子商務(wù)布局。

https://flowbite.com/

10. daisy UI

DaisyUI 是一個(gè)流行的 Tailwind CSS 組件庫，是一個(gè)免費(fèi)的開源項(xiàng)目。它已獲得超過 10,000 個(gè) Github 星和超過 800,000 個(gè) npm 下載。DaisyUI 通過類似于 btn、card 等的類擴(kuò)展了 Tailwind CSS，適用于所有常見的 UI 組件。這使我們可以專注于每個(gè)項(xiàng)目的最重要特征，而不必為每個(gè)項(xiàng)目創(chuàng)建基本元素。

DaisyUI 的 Tailwind 組件具有低的 CSS 特定性，因此您可以使用 Tailwind CSS 實(shí)用類自定義一切。DaisyUI 兼容許多前端框架，包括 React、Nextjs、Nuxt、Vue、Solidjs、Svelte、Remix、Angular 等等。

https://daisyui.com/

結(jié)束

由于 Tailwind CSS 是低級別的，您可以創(chuàng)建高度可定制的模板和設(shè)計(jì)，而無需編寫一行 CSS 代碼或擔(dān)心覆蓋已有的組件樣式。

本文介紹的 Tailwind CSS 組件和模板套件使得對您的項(xiàng)目進(jìn)行樣式設(shè)計(jì)變得非常容易。

獲取創(chuàng)建您自己的 Tailwind CSS 樣式模板的靈感，或者只需復(fù)制、粘貼并輕松自定義它們。

今天的分享就到這里，感謝你的閱讀，希望能夠幫助到你，文章創(chuàng)作不易，如果你喜歡我的分享，別忘了點(diǎn)贊轉(zhuǎn)發(fā)，讓更多有需要的人看到，最后別忘記關(guān)注「前端達(dá)人」，你的支持將是我分享最大的動力，后續(xù)我會持續(xù)輸出更多內(nèi)容，敬請期待。

原文：https://medium.com/@
pinjarirehan/tailwinds-top-10-css-component-and-template-bundles-8d048349c2db

作者：Rehan Pinjari

非直接翻譯，有自行改編和添加部分，翻譯水平有限，難免有疏漏，歡迎指正文章來源地址http://www.zghlxwxcb.cn/news/detail-460539.html