來源 |?https://xueyuanjun.com/post/22065 我們知道，從 Laravel 8 開始，自帶前端腳手架代碼默認(rèn)兼容 Tailwind CSS 框架，取代了之前的 Bootstrap CSS 框架。那么 Tailwind 是什么？它與 Bootstrap 有什么區(qū)別？如何在 HTML 頁面中使用？我們將在這篇教程中給大家簡單介紹下。 Tailwind 是什么 簡而言之，Taildwind 是一個(gè)實(shí)用優(yōu)先的工具集 CSS 框架，旨在提升現(xiàn)代 Web 應(yīng)用的開發(fā)效率。 注意這里的關(guān)鍵詞 —— 實(shí)用優(yōu)先，這是 Tailwind 的最大亮點(diǎn)，不同于其他 CSS 框架（例如 Bootstrap、Foundation、Bulma 等）通過一個(gè)預(yù)設(shè)的「巨型」 class 包含一大堆樣式屬性，Tailwind 的每個(gè) class 通常只會(huì)設(shè)置單個(gè)樣式屬性，你需要通過組合多個(gè) class 得到自己想要的最終渲染效果。 Tailwind 另一個(gè)與其他 CSS 框架不同之處是使用? PostCSS ?處理最終輸出。 與 Bootstrap 有什么區(qū)別 正如上面所說的，Bootstrap 開箱提供了豐富的布局、組件和樣式庫，你可以不做任何調(diào)整直接拿來使用，這在構(gòu)建一些內(nèi)部項(xiàng)目或者驗(yàn)證原型的時(shí)候非常方便，但是如果需要定制自定義的樣式風(fēng)格，則需要覆蓋默認(rèn)的樣式屬性，這可能會(huì)導(dǎo)致大量無效樣式屬性的加載。 而 Tailwind 恰恰相反，開箱什么組件和樣式庫都沒有提供，一切都需要自己 DIY：你需要自行去為每個(gè)頁面元素設(shè)計(jì)樣式，然后組合使用 Tailwind 提供的工具集 class（每個(gè) class 通常只負(fù)責(zé)設(shè)置單個(gè)屬性，而不是像 Bootstrap 那樣包含一堆屬性）達(dá)到最終的渲染效果。 因此，使用 Tailwind 每個(gè) HTML 元素的 class 屬性通常會(huì)有一連串值，這看起來好像很麻煩，不過，Tailwind 的優(yōu)點(diǎn)正好彌補(bǔ)了 Bootstrap 的不足：對(duì)于一些長期維護(hù)的、面向用戶的、需要有定制樣式風(fēng)格的項(xiàng)目，你不需要去加載和覆蓋框架內(nèi)置的樣式屬性，就可以輕松設(shè)計(jì)定制出自己獨(dú)特風(fēng)格的樣式代碼。 注：Tailwind 現(xiàn)在也提供了官方組件庫 Tailwind UI，不過完整版需要付費(fèi)。 所以 Tailwind 不是銀彈，你需要按照自己的項(xiàng)目需求去選擇合適的 CSS 框架，對(duì)于內(nèi)部系統(tǒng)、管理后臺(tái)、原型項(xiàng)目，使用 Bootstrap 可能更合適，而對(duì)于需要長期維護(hù)的前端界面、或者需要定制設(shè)計(jì)樣式風(fēng)格的項(xiàng)目，則使用 Tailwind 可能更合適。 如果從面向?qū)ο缶幊痰慕嵌葋砜磧烧叩膮^(qū)別，要自定義擴(kuò)展頁面樣式，Bootstrap 使用的是繼承的方式實(shí)現(xiàn)，而 Tailwind 則使用的是組合的方式實(shí)現(xiàn)，如果你對(duì)面向?qū)ο缶幊逃斜容^深刻的理解，就可以體味到兩者各自的優(yōu)勢，如果項(xiàng)目需要擴(kuò)展樣式，使用 Tailwind 越到后面越靈活，而如果項(xiàng)目樣式根本不需要擴(kuò)展，使用 Bootstrap 就夠了。 渲染一個(gè)卡片組件 下面我們分別通過 Bootstrap 和 Tailwind 框架渲染一個(gè)卡片組件，來看看兩者實(shí)際使用的區(qū)別。為了簡化演示流程，我們通過 CDN 域名來引入對(duì)應(yīng)的 CSS 資源文件。 使用 Bootstrap 通過 Bootstrap 框架實(shí)現(xiàn)非常簡單，因?yàn)?Bootstrap 內(nèi)置的組件庫提供了 卡片組件 ，直接拿來用就好了： 基于 Bootstrap 渲染卡片組件 PHP 全棧工程師指南 學(xué)院君帶你徹底掌握 Laravel + Vue.js，成為合格的 PHP 全棧工程師！
前往學(xué)習(xí) 預(yù)覽這個(gè) HTML 文檔，卡片組件渲染效果如下： 可以看到，我們不用做任何樣式設(shè)計(jì)和編碼就可以基于 Bootstrap 內(nèi)置的卡片組件相關(guān) class 渲染出一個(gè)漂亮的卡片組件來。 使用 Tailwind Tailwind 開箱沒有提供任何組件庫，因此通過 Tailwind 框架渲染同樣的卡片組件需要組合使用 Tailwind 提供的工具集 class 來實(shí)現(xiàn)： 基于 Tailwind 渲染卡片組件 PHP 全棧工程師指南
學(xué)院君帶你徹底掌握 Laravel + Vue.js，成為合格的 PHP 全棧工程師！ 前往學(xué)習(xí)
注：所有這些內(nèi)置的工具集 class 可以在 Tailwind 官方文檔查閱。 在瀏覽器中預(yù)覽該 HTML 文檔，渲染效果如下： 可以看到，Tailwind 的實(shí)現(xiàn)看起來更復(fù)雜一些，但是對(duì)于默認(rèn)樣式的擴(kuò)展更方便，不需要像 Bootstrap 那樣在 HTML 元素上設(shè)置 style 屬性覆蓋默認(rèn)樣式，而是在 class 列表中引入新的工具集 class 即可。 類名屬性對(duì)比 另外，你還可以對(duì)比兩種 CSS 框架渲染卡片組件的 class 類名，Bootstrap 的一個(gè) class 包含了多個(gè)樣式屬性設(shè)置（負(fù)責(zé)多個(gè)職能）： 而 Tailwind 的一個(gè) class 往往只包含單個(gè)樣式屬性設(shè)置（負(fù)責(zé)單個(gè)職能）： 以上就是 Tailwind 和 Bootstrap 的主要區(qū)別和基本使用介紹，更多細(xì)節(jié)，請(qǐng)參考? Tailwind 官方文檔 。 
