前言:
tailwind可以理解為一個css庫粒氧，編寫方式很另類越除，但是如果時間長了可能會變成真香系列（也能可能變成真。外盯。摘盆。。）饱苟，注：以下闡述都是個人理解以及網(wǎng)上尋找的資料
什么是Tailwind CSS:
Tailwind CSS是一種實用工具- 基于低級別的CSS框架孩擂，旨在簡化建設有速度，較少關注Web應用程序編寫自定義的CSS,
官話：Rapidly build modern websites without ever leaving your HTML.（無需離開 HTML 即可快速構建現(xiàn)代網(wǎng)站箱熬。）
tailwindcss 是一個非常富有爭議的庫类垦，喜歡它的人和討厭它的人都非常多。
不做對比城须！直接上干貨蚤认，整！
今天給大家?guī)淼陌姹?tailwindcss 版本是：3.0.23
上才藝!!!
啟動項目,我們可以在 src/App.vue 中為 img 標簽增加一個 class="bg-red-900"
<img class="bg-red-900" alt="Vue logo " src="./assets/logo.png" />
查看項目 img 標簽背景變?yōu)榧t色酿傍，則表示成功
這個時候我們定位這個元素
這種在HTML中編寫樣式的感覺很奇妙,而這樣的一種方式就是 tailwindcss 的核心理念
tailwind 官方介紹為 無需離開HTML即可快速構建現(xiàn)代網(wǎng)站 烙懦，那么這句話怎么解讀呢？具體來說就是 ： tailwind 提供了很多的 具體類名 ，每一個類名背后都代表著 一段 css 的內(nèi)容氯析。之前我們需要 template 中完成 html亏较，style 中完成 css 。那么在現(xiàn)在我們就可以把 css 變成 對應的類名 直接添加到 html 的 class 中掩缓。所以我們就不需要再去切換到 style 區(qū)域叹阔，直接在 html 區(qū)域來完成對應的樣式了
不能說知己知彼轩拨，但是至少要了解個大概，這種語法、或者類名多少有點難搞怎么辦谆棺，別擔心tailwind給用戶羅列出了對應API文檔 語法文檔 礼搁，而且VScode 有一個很好的插件 "Tailwind CSS IntelliSense"
有了這個插件钓猬，我們就再也不用擔心寫錯的問題了普舆，在我們寫對應元素的時候右側會給我們很好的提示，
tailwindcss 設計理念和價值體現(xiàn)
1表悬，它的設計理念
2弥锄，它的價值體現(xiàn)
設計理念
tailwindcss 中一個非常核心的內(nèi)容就是： 每一個類名都代表了一個 css 屬性 ，這個樣式在 tailwindcss 中被稱作為 原子化 CSS
那么想要搞明白這樣的一種設計理念蟆沫，那么我們需要先搞清楚 CSS 設計史上的一些粒度劃分籽暇。
整個前端歷史中，CSS 顆粒度設計主要可以分為 4 種形式（ 顆粒度自上而下逐漸增大饭庞，顆粒度越大則約束性越高戒悠，可定制性越弱 ）：
1，行內(nèi)樣式：樣式全部寫入行內(nèi)舟山。自由度最高绸狐，可定制化最強。但是不方便樣式的復用捏顺，每次都要寫完整的樣式六孵。
<div style="background-color: #ffffff; color: #333333;"> 我是一個div</div>
2纬黎，原子化 CSS：每一個類名都代表了一個 css 屬性幅骄。自由度依然很強，可定制化依然很高本今，也方便復用拆座。但是大量的樣式會造成大量的類名。
<div class="bg-white text-zinc-800">我是一個div</div>
3冠息，傳統(tǒng)形式：通過一個或幾個具有語義化的 class 來描述一段 css 屬性挪凑。封裝性強，語義化強逛艰，自由度和可定制化性一般（比如 cart 就標記好了當前為一個卡片躏碳，通常邊框、弧度散怖、陰影菇绵、padding 也都一并規(guī)定好了）肄渗。但是大量的 html 需要取大量的語義化 class ，并且在 html 和 css 中需要來回的切換咬最、查找翎嫡。
<div class="container-box desc-container cart">我是一個div</div>
4，組件形式：在 組件庫 中極為常見永乌。封裝性極強（不光封裝了樣式惑申，也封裝了功能），語義化強翅雏。但是自由度和可定制化性比較差圈驼。
<m-cart>我是一個div</m-cart>
那么根據(jù)我們剛才所說，這四種形式的樣式處理方式其實 各有優(yōu)劣望几。
而 tailwindcss 的核心設計理念就是：第二個：原子化的 CSS 碗脊。那么根據(jù)我們剛才的分析，這種方式惟一的問題就是：大量的樣式會造成大量的類名 這樣的情況橄妆。而這樣的一個問題在她的 高自由度衙伶、高定制化、高可復用 的優(yōu)勢之下害碾，也就變得沒有那么重要了矢劲。
價值體現(xiàn)
想要明確 tailwindcss 的價值，那么我們需要先來明確一下 現(xiàn)代的前端應用 開發(fā)的一些問題慌随。
我們以傳統(tǒng)的后臺項目的項目為例芬沉。如項目中使用了 element-plus作為 UI 組件庫 。當我們決定使用 element-plus 的那一刻起阁猜，就決定了 整體的項目樣式為 element 設計風格丸逸。 如果此時我們想要把項目做出個性化的風格出來，那么 ”幾乎是不可能的“剃袍。
不過好在 后臺 系統(tǒng)黄刚，風格本就千篇一律，這樣設計倒也沒有問題民效。但是如果是 前臺 系統(tǒng)呢憔维？
前臺系統(tǒng)講究 高定制化、高個性化畏邢、高交互性 业扒，在這樣的一個要求下，element舒萎、antd程储、vant 這樣的組件庫是否還能夠滿足我們需求呢？ 我想答案是肯定的
演示！~
PC
H5
結語：
講了這些我想大家對tailwind已經(jīng)有一個了解章鲤，其實我只是介紹了tailwind功能的冰山一角致板，他比較強大的功能比如在 tailwind.config.js 文件中進行全局配置，以及樣式不同尺寸的統(tǒng)一管理咏窿、主字號的統(tǒng)一配置等等都還沒有呈現(xiàn)給大家斟或，有興趣的小伙伴可以有時間看看，結尾附上搭建過程集嵌！
tailwind搭建過程
1萝挤，在我們的項目中執(zhí)行 npm install -D tailwindcss@3.0.23 postcss@8.4.8 autoprefixer@10.4.2 ，安裝 tailwindcss
2根欧，執(zhí)行 npx tailwindcss init -p 創(chuàng)建 tailwind.config.js 文件怜珍，該文件為 tailwindcss 的配置文件，該文件默認內(nèi)容為：
3凤粗，接下來我們需要添加模板路徑（tailwind 的應用范圍）
4酥泛，在 tailwind.config.js 文件中的 content 選項下，寫入如下內(nèi)容：
module.exports = {
// Tailwind 應用范圍
content: ['./index.html', './src/*/.{vue,js}'],
...
}
5嫌拣，接下來我們需要添加一些 tailwind 的指令
6柔袁，創(chuàng)建 src/styles/index.scss 文件，并寫入如下代碼：
// 導入 tailwind 的基礎指令組件
@tailwind base;
@tailwind components;
@tailwind utilities;
7异逐，然后在 src/main.js 中引入該 index.scss
8捶索，因為我們使用了 scss ，所以需要安裝 sass 灰瞻，執(zhí)行 npm i -D sass@1.45.0 安裝 sass
9腥例，此時 tailwind 已經(jīng)安裝到我們的項目中
幾個亮眼的地方
首先是響應式設計。
css的媒體查詢寫起來還是比較麻煩的酝润，如下：
@media only screen and (max-width: 760px) {
.navbar {
width:100%;
}
}
使用了Tailwind CSS就免去這些繁瑣的東西燎竖。默認情況下，Tailwind使用移動優(yōu)先斷點系統(tǒng)要销，類似于您在Bootstrap或Foundation中可能使用的系統(tǒng)构回。
這意味著未加前綴的實用程序（如uppercase）在所有屏幕尺寸上都有效，而帶前綴的實用程序（如md:uppercase）僅在指定的斷點及以上斷點生效蕉陋。
如下一段代碼就可以實現(xiàn)不同尺寸顯示不同樣式捐凭，是不是比媒體查詢寫法方便很多呢拨扶！
<div class="bg-red-500 sm:bg-green-500 md:bg-blue-500 lg:bg-pink-500 xl:bg-teal-500"></div>
當然了凳鬓，媒體尺寸斷點也是可以自定義的。
// tailwind.config.js
module.exports = {
theme: {
screens: {
'tablet': '640px',
// => @media (min-width: 640px) { ... }
'laptop': '1024px',
// => @media (min-width: 1024px) { ... }
'desktop': '1280px',
// => @media (min-width: 1280px) { ... }
},
}
}
第二方面是Postcss運用
Tailwind CSS結合了 postcss患民，將基礎的 css 全部拆分為原子級別缩举，同時還補全各種瀏覽器模式前綴，兼容性更好。例如：border: 1px solid #eee;拆分為：border-width仅孩、border-style托猩、border-color
而且還支持根據(jù)自己設計稿定義契合自己項目的 csss 原子，這點真的很棒辽慕。
第一京腥，如果不是為了快捷開發(fā)，恐怕不會有太多人完全滿意傳統(tǒng) CSS 框架的樣式設計溅蛉。 第二公浪，傳統(tǒng) CSS 框架通過“覆蓋”進行定制。一般來講船侧，健康的做法是覆蓋框架提供的變量欠气，但是定制能力很有限。臟一點的做法就是手寫 CSS 覆蓋框架原生樣式镜撩，但是原生樣式之復雜（各種父級的不同情況预柒，偽類的不同情況），哪怕一個小的組件袁梗，你也無法面面俱到宜鸯。并且你最好得看源碼。
第三方面是可維護性問題
就拿我們實現(xiàn)一個按鈕效果來說遮怜，使用utilities class實現(xiàn)的話如下：
<!-- Using utilities -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Button
</button>
如果說有比較常用的顾翼，這里還能使用@apply指令圍繞通用實用程序模式創(chuàng)建抽象，可以輕松解決此問題奈泪。
<!-- Extracting classes using @apply -->
<button class="btn btn-blue">
Button
</button>
<style>
.btn {
@apply font-bold py-2 px-4 rounded;
}
.btn-blue {
@apply bg-blue-500 text-white;
}
.btn-blue:hover {
@apply bg-blue-700;
}
</style>
這樣維護起來也比較方便适贸，相比bootstrap等這些框架，顯得更加靈活涝桅，可操作性更強拜姿。
