為什么使用Tailwind Css框架
簡短的概括：
發現問題：項目中css代碼痛點
.mock {
margin: auto;
font-size: 16px;
// ...
}
<div class='mock'>mock</div>以上代碼就是舉個例子，大部分情況應該都是寫一個類，然后整一堆樣式進去。這種方式寫多了以后，會感受到一些痛點，比如說：
1) 取名困難，節點結構一多，取名真的是個難事。當然了，我們可以用一些規范或者選擇器的方式去規避一些取名問題。
2) 需要用 JS 控制樣式的時候又得多寫一個類，尤其交互多的場景。
3) 組件復用大家都懂，但是樣式復用少之又少，這樣就造成了冗余代碼變多。
4) 全局污染，這個其實現在挺多工具都能幫我們自動解決了。
5) 死代碼問題。JS 我們通過 tree shaking 的方式去除用不到的代碼減少文件體積，但是 CSS 該怎么去除?尤其當項目變大以后，無用 CSS 代碼總會出現。
6) 樣式表的插入順序影響了 CSS 到底是如何生效的。
一、Tailwind CSS 介紹
Tailwind 能夠快速將樣式添加到 HTML 元素中，并提供了大量的開箱即用的設計樣式。
tailwindcss 基于比組件更小、更靈活的工具類思想的 CSS 框架。這個思想簡單來說就是用 class 保證靈活、便于自定義組件，而不是在組件基礎上實現個性化。
官網：https://www.tailwindcss.cn/
如果你從來沒見過 Tailwind 的實際應用，可以看這個：
<div class="bg-gray-100 rounded-xl p-8">Hello World</div>
這里的類名就反映了 Tailwind 的定義：一個包含多個預定義類(所謂的工具類)的集合。你并不需要編寫基礎的 CSS 樣式規則，只需要直接在 HTML 中應用已經事先定義好的類名。
這樣的類名還有很多。下面這個列表展示了部分類別和對應的例子：
1)背景 (bg-gray-200, bg-gradient-to-bl)
2)彈性布局 (flex-1, flex-row)
3)網格布局 (grid-cols-1, col-span-4)
4)內邊距 (p-0, p-1)
5)尺寸 (w-1, h-1)
開發大型應用的時候，每一個 HTML 元素都充斥著一大堆 Tailwind 的工具類名。
<div class="sm:w-4 md:w-6 lg:w-10 xl:w-full sm:text-sm md:text-base lg:text-base xl:text-2xl flex-1 sm:flex-none bg-black sm:bg-white rounded-md sm:rounded-none">
hello world
</div>
問題：
要怎么組織這些類名呢?也許我們要創建并遵循某個排序規則。
解決方案：
部分 HTML 元素會使用非常多的樣式，這種情況下應該考慮將樣式與 HTML 標簽進行分離，單獨放到某個文件里。這樣，我們就可以組織樣式并增強其可讀性。你不能把 CSS 的所有功能”塞到“ class 這一個 HTML 標簽屬性里，Tailwind 也不能。這樣做只會讓 HTML 結構越發臃腫。
@apply
針對上面提到的問題，Tailwind 允許我們在單個 CSS 文件中使用它們的類名：
.header {
@apply bg-red-200 w-4 text-gray-400 rounded-sm border-2;
}比如說項目中的按鈕都是存在通用的圓角、內邊距、字體等，這樣我們就可以封裝出這樣一個類：
.btn {
@apply p-8 rounded-xl font-semibold;
}二、使用 Tailwind CSS 的理由
1、超小的文件尺寸 = 令人難以置信的性能
在開發模式下，Tailwind的輸出尺寸非常大。這是設計使然：在此階段生成每個可能的類，因此當你想要使用某些東西時，無需等待完成構建的過程。
但是，一旦Tailwind CSS進入生產模式，就會清除所有未與PurgeCSS工具一起使用的類。這是通過在項目文件中搜索類的名稱來實現的，只保留那些使用過的。你可以在purge數組中的tailwind.config.js中配置將搜索哪些文件路徑。
// tailwind.config.js
module.exports = {
purge: [
"./src/**/*.html",
"./src/**/*.vue",
'./src/**/*.js'
],
theme: {},
variants: {},
plugins: [],
}
2、原型和快速構建
使用常規SCSS，需要為頁面上的每個元素編寫自定義類。這樣雖然可以提供更好的控制，但編寫自定義類需要花費大量時間：你必須在HTML中添加類，然后在CSS中創建，再以長格式寫出每個屬性。你必須等待CSS構建后才能看到結果——并且，如果你需要進行更多更改，則每次都需要重新構建，這可能會花費幾秒鐘時間并中斷你的流程。
Tailwind CSS取消了這些額外的步驟，并在為元素設置樣式時提供了簡單、爽快的開發體驗。可以看到想要設置樣式的元素，使用簡寫方式添加需要的屬性，不需要等待CSS文件束就能很快出現改變。因此只要專注于一個地方即可，不用頻繁切換到不同的文件，整個過程感覺很流暢。
<div class="bg-white rounded p-4">
<h1 class="text-24 font-heading underline">
Foobar
</h1>
<p class="text-16 font-body>
Hello world!
</p>
</div>
3、消除范圍泄漏
人們喜歡BEM以及它能在今天如此流行的原因是，命名系統類的構建是為了表示組件的結構。在使其易于閱讀和理解的同時，開發人員還受益于這種結構：由于布局易于理解，因而可以在不使用CSS選擇器的情況下編寫類。如下：
// this
.block {
&__element { ... }
&__element--modifier { ... }
}
// not this
.block {
& > .element {
&.modifier { ... }
}
}
CSS選擇器的問題在于它們給CSS帶來了復雜性：組件變得非常依賴于特定的HTML結構。由于通用CSS類，例如.container，可以重復多次，所以使用這些名稱可能會導致重疊，因此更改一個類將影響許多其他的類。這是我們使用BEM的主要原因之一，因為它使得結構清晰，并將每個類扁平化到頂級范圍，這樣就不會互相依賴。如果沒有像這樣的CSS方法，那么開發工作可能會讓人頭疼，并且其簡單性意味著其他人可以更容易地理解它。
三、Tailwindcss 為何大受歡迎
NPM.DEVTOOL 中 tailwind 標簽大全
地址：https://npm.devtool.tech/tailwindcss
現在項目開發用的 TailwindCSS，在這里談一點感受，TailwindCSS 因為一個 class 代表一個 CSS 屬性這種原子化 CSS (Atomic CSS)，這種細粒度的 CSS 方案備受爭議。
1、四種粒度
<div style="{ borderRadius: '0.5rem', padding: '1rem' }"> Click </div>
<div class="rounded-lg p-4"> Click </div>
<div class="button"> Click </div>
<Button> Click </Button>越往下封裝的粒度就越大，越抽象，靈活性就越低，但是靈活性往往是和開發工作量成反比的，靈活性越高也就意味著更多的工作需要開發者自己去處理，如何平衡開發工作量與靈活度之間的關系就顯得尤為重要。
因為這涉及到css庫的選擇，其中BootStrap庫更多的是提供顆粒度3的形式，給定一個固定的樣式，開發者需要自定義樣式的話必須去重寫樣式，而tailwind則是提供顆粒度2形式的原子樣式，更多的是提供一種規范，然后將更大的自由度交由開發者，由開發者來進行樣式的組裝。
2、一些問題的解答
Tailwindcss 為啥受歡迎，無非是更好用的原子化的 CSS。在國外如火如荼，但是在國內論壇上爭議很大，前幾天看的前端大佬博客上寫了一篇關于 Tailwindcss 的文章，但是底下評論很多了各種問題，總結一下
Q1: tailwind的寫法和行內 CSS 有何區別，不就少寫幾個字嗎?
大部分人的想法應該是這樣的: 僅僅對于 text-center 而言，雖然提供了些許方便，但是不足以拉開差距。
如果說它僅僅是簡單的原子化 CSS，好用卻不亮眼。但是它卻不僅僅止于此。
1. 方便性: text-center、grid-cols-3
或許一個 text-center 不足以使你覺得提供了多大的方便性，但對于一個三等分的 Grid 屬性來說，一個 grid-cols-3 和 shadow 絕對方便。
.grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}2. 語義化: text-lg、text-white、ring、animate-spin`
text-lg，一個較大字體，如果設置行內樣式，肯定有諸多麻煩的事: 我想設計一個較大的字體，那我應該設計多大尺寸、使用什么單位。
同樣還有:
text-white: 白色的色值是哪個來著?
ring: 我想給這個按鈕加一個圈圈?
animate-spin: 怎么做一個動畫?
3. 響應式:
先來看一個在工作中會遇到的響應式布局問題，這也是我上一次在頭條面試時的一道題目
響應式布局，一大堆子元素，在大屏幕三等分，中等屏幕二等分，小屏幕一等分?
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
通過 grid 布局很容易實現，但未免繁瑣
@media (min-width: 1024px) {
.container {
grid-template-columns: repeat(3,minmax(0,1fr));
}
}
@media (min-width: 768px) {
.container {
grid-template-columns: repeat(2,minmax(0,1fr));
}
}
.conainer {
display: grid;
gap: 1rem;
}那使用 tailwind 呢? 只要一行，就問你高效不高效。
4. 修飾符
把修飾符，如各種偽類、暗黑模式、響應式設計至于前綴的設計簡直深得我心。
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"></div>
Q2: 既然 TailwindCSS 這么好用，那豈不是可以擺脫手寫 CSS 了
很遺憾，不能。不過雖然你無法擺脫手寫 CSS，但是你基本上也寫不了幾行，說以下幾種很常用的情況。
1. 復雜選擇器
當父級元素鼠標懸浮時的，子級元素的樣式控制
.container:hover .item {
}2. CSS function
.body {
height: calc(100vh - 6rem)
}3. 多種屬性復用
.item {
@apply p-2 border-b flex justify-between font-mono;
}Q3: 造成新的記憶負擔
這個問題就仁者見仁智者見智了，在 Vue 的 template 語法中也經常出現此類問題，很多人會對一些命名上的約定，特別是自己不太喜歡的約定天然排斥，這也無可厚非。
在初期確實會一邊開發網頁，一邊瞅著文檔全局搜索: TailwindCSS 屬性查找，現在借助瀏覽器插件及熟能生巧的經驗已經不太需要翻文檔了。
1. Tailwind CSS IntelliSense (vscode)
智能補全
代碼提示
初期經常花時間翻文檔而不手寫 CSS，而其中的原因不外乎兩個:
1、多寫幾個字母，確實有點嫌麻煩，有這時間還不如看看文檔，全局搜索下也不費事;
2、自己設置一個 fontSize，padding、margin 實在不知道設置多少尺寸，tailwindcss 有較大的約束;
過了多久就會覺得: 嗯，真香。
四、Tailwindcss 項目實踐
原本傳統的寫法是定義一個類，然后寫上需要的樣式：
.class1 {
font-size: 18px;
margin: 10px;
}
.class2 {
font-size: 16px;
color: red;
margin: 10px;
}這種寫法是存在一部分樣式重復的，換成 Atom CSS 就能減少一部分代碼的冗余。
把 CSS 當成組件來寫。大家乍一看 tailwindcss 官網肯定會覺得我在 HTML 里寫個樣式要敲那么多類不好吧。
<figure class="md:flex bg-gray-100 rounded-xl p-8 md:p-0">
<img class="w-32 h-32 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg" alt="" width="384" height="512">
<div class="pt-6 md:p-8 text-center md:text-left space-y-4">
<blockquote>
<p class="text-lg font-semibold">
“Tailwind CSS is the only framework that I've seen scale
on large teams. It’s easy to customize, adapts to any design,
and the build size is tiny.”
</p>
</blockquote>
<figcaption class="font-medium">
<div class="text-cyan-600">
Sarah Dayan
</div>
<div class="text-gray-500">
Staff Engineer, Algolia
</div>
</figcaption>
</div>
</figure>
其實我們是可以利用 Atom CSS 一次只干一件事的特性，將這些類隨意組裝成我們想要的類，這樣就可以提供出來一個更上層的通用樣式來復用。
tailwind.confing.js 配置文件
/**
* 定制配置
* 默認配置請參考 https://unpkg.com/browse/tailwindcss@2.2.6/stubs/defaultConfig.stub.js
*/
module.exports = {
purge: [
"./src/**/*.html",
"./src/**/*.vue",
'./src/**/*.jsx'
],
theme: {
extend: {
fontFamily: {
sans: ["Inter", "Roboto", '"Segoe UI"'],
dincond: ["DINCond-Black"]
},
fontSize: {
'2.5': '0.625rem', // 10px
'3': '0.375rem', // 12px
'5.5xl': '3.25rem', // 52px
'4.5xl': '2.5rem', //40px
},
width: {
'4.5': '1.125rem', //18px
'10.5': '2.65rem', //42px
'15': '3.75rem', // 60px
'18': '4.5rem', // 74px
'18.5': '4.625rem', // 74px
'23': '5.75rem' // 92px
},
lineHeight: {
'12': '3rem', // 48px
'15': '3.875rem', // 62px
'16': '4rem', //64px
'14': '3.5rem', //56px
"18" : "4.625rem" //74px
},
padding: {
'0.5': '0.125rem', // 2px
'5.5': '1.375rem', // 22px
'4.5': '1.125rem', //18px
'0.75': '0.1875rem', //3px
'7.5': '1.875rem' //30px
},
paddingBottom:{
'4.5': '1.375rem' //22px
},
margin: {
'4.5': '1.125rem', //18px
'15': '3.75rem', // 60px
'21.25': '5.3125rem', // 85px
'11.5': '2.875rem', // 46px
'19': '4.75rem', //76px
},
marginTop: {
'6.5': '1.625rem', // 26px
},
spacing: {
'3.5': '0.875rem', // 14px
'7.5': '1.875rem', //30px
'9.5': '2.375rem', // 38px
// '15': '3.375rem', // 54px
'11.5': '2.875rem', // 46px
'23': '5.75rem', // 92px
'28': '7rem', // 112px
'98': '39rem', // 624px
},
height: {
'0.25': '0.0625rem', //1px
'0.75': '0.1875rem', // 3px
'14': '3.5rem', // 56px
'10.5': '2.65rem' //42px
},
backgroundColor: {
'primary-a100': 'rgba(43, 121, 255, 0.1)',
},
borderRadius: {
'5.5': '1.375rem'
}, //22px
zIndex: {
'6': 6 // z-index: 6
},
screens:{
'3xl': '1664px',
'4xl': '1792px'
},
scale: {
'85': '.85', // 0.85rem
}
}
},
plugins: [
require("tailwindcss-theming")({
variants: {
light: true
}
})
]
};
至此，我們已經了解了什么是 Tailwind CSS?如何使用 Tailwind CSS?Tailwind CSS 定制以及插件的使用，相信大家對Tailwind CSS已經有一個全面的認識。
