來源 |?https://xueyuanjun.com/post/22065我們知道，從 Laravel 8 開始，自帶前端腳手架代碼默認兼容 Tailwind CSS 框架，取代了之前的 Bootstrap CSS 框架。那么 Tailwind 是什么？它與 Bootstrap 有什么區別？如何在 HTML 頁面中使用？我們將在這篇教程中給大家簡單介紹下。

Tailwind 是什么

簡而言之，Taildwind 是一個實用優先的工具集 CSS 框架，旨在提升現代 Web 應用的開發效率。注意這里的關鍵詞 —— 實用優先，這是 Tailwind 的最大亮點，不同于其他 CSS 框架(例如 Bootstrap、Foundation、Bulma 等)通過一個預設的「巨型」 class 包含一大堆樣式屬性，Tailwind 的每個 class 通常只會設置單個樣式屬性，你需要通過組合多個 class 得到自己想要的最終渲染效果。Tailwind 另一個與其他 CSS 框架不同之處是使用?PostCSS處理最終輸出。

與 Bootstrap 有什么區別

正如上面所說的，Bootstrap 開箱提供了豐富的布局、組件和樣式庫，你可以不做任何調整直接拿來使用，這在構建一些內部項目或者驗證原型的時候非常方便，但是如果需要定制自定義的樣式風格，則需要覆蓋默認的樣式屬性，這可能會導致大量無效樣式屬性的加載。而 Tailwind 恰恰相反，開箱什么組件和樣式庫都沒有提供，一切都需要自己 DIY：你需要自行去為每個頁面元素設計樣式，然后組合使用 Tailwind 提供的工具集 class(每個 class 通常只負責設置單個屬性，而不是像 Bootstrap 那樣包含一堆屬性)達到最終的渲染效果。因此，使用 Tailwind 每個 HTML 元素的 class 屬性通常會有一連串值，這看起來好像很麻煩，不過，Tailwind 的優點正好彌補了 Bootstrap 的不足：對于一些長期維護的、面向用戶的、需要有定制樣式風格的項目，你不需要去加載和覆蓋框架內置的樣式屬性，就可以輕松設計定制出自己獨特風格的樣式代碼。注：Tailwind 現在也提供了官方組件庫 Tailwind UI，不過完整版需要付費。所以 Tailwind 不是銀彈，你需要按照自己的項目需求去選擇合適的 CSS 框架，對于內部系統、管理后臺、原型項目，使用 Bootstrap 可能更合適，而對于需要長期維護的前端界面、或者需要定制設計樣式風格的項目，則使用 Tailwind 可能更合適。如果從面向對象編程的角度來看兩者的區別，要自定義擴展頁面樣式，Bootstrap 使用的是繼承的方式實現，而 Tailwind 則使用的是組合的方式實現，如果你對面向對象編程有比較深刻的理解，就可以體味到兩者各自的優勢，如果項目需要擴展樣式，使用 Tailwind 越到后面越靈活，而如果項目樣式根本不需要擴展，使用 Bootstrap 就夠了。

渲染一個卡片組件

下面我們分別通過 Bootstrap 和 Tailwind 框架渲染一個卡片組件，來看看兩者實際使用的區別。為了簡化演示流程，我們通過 CDN 域名來引入對應的 CSS 資源文件。

使用 Bootstrap

通過 Bootstrap 框架實現非常簡單，因為 Bootstrap 內置的組件庫提供了卡片組件，直接拿來用就好了： 基于 Bootstrap 渲染卡片組件

PHP 全棧工程師指南

學院君帶你徹底掌握 Laravel + Vue.js，成為合格的 PHP 全棧工程師！

前往學習 預覽這個 HTML 文檔，卡片組件渲染效果如下：可以看到，我們不用做任何樣式設計和編碼就可以基于 Bootstrap 內置的卡片組件相關 class 渲染出一個漂亮的卡片組件來。

使用 Tailwind

Tailwind 開箱沒有提供任何組件庫，因此通過 Tailwind 框架渲染同樣的卡片組件需要組合使用 Tailwind 提供的工具集 class 來實現： 基于 Tailwind 渲染卡片組件 PHP 全棧工程師指南 學院君帶你徹底掌握 Laravel + Vue.js，成為合格的 PHP 全棧工程師！ 前往學習 注：所有這些內置的工具集 class 可以在 Tailwind 官方文檔查閱。在瀏覽器中預覽該 HTML 文檔，渲染效果如下：可以看到，Tailwind 的實現看起來更復雜一些，但是對于默認樣式的擴展更方便，不需要像 Bootstrap 那樣在 HTML 元素上設置 style 屬性覆蓋默認樣式，而是在 class 列表中引入新的工具集 class 即可。

類名屬性對比

另外，你還可以對比兩種 CSS 框架渲染卡片組件的 class 類名，Bootstrap 的一個 class 包含了多個樣式屬性設置(負責多個職能)：而 Tailwind 的一個 class 往往只包含單個樣式屬性設置(負責單個職能)：以上就是 Tailwind 和 Bootstrap 的主要區別和基本使用介紹，更多細節，請參考?Tailwind 官方文檔。本文完?推薦閱讀【Vue.js入門到實戰教程】15-ES 2015 新特性一覽【Vue.js入門到實戰教程】14-基于 Laravel Jetstream 的Vue 技術棧編寫表單組件【Vue.js入門到實戰教程】13-通過Axios發送Ajax請求獲取接口數據渲染組件【Vue.js入門到實戰教程】12-在Laravel項目中編寫單文件Vue組件【Vue.js入門到實戰教程】11-Vue Loader(下)|?編寫一個單文件Vue組件【Vue.js入門到實戰教程】10-Vue Loader(上)|?基于Vue CLI初始化原型項目【Vue.js入門到實戰教程】09-Vue組件插槽|?父子組件間的內容分發和插槽作用域

總結

以上是生活随笔為你收集整理的vue设置cookie的domain无效_【Vue.js入门到实战教程】16Tailwind 与 Bootstrap 的区别和使用入门...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。