是什么瘩将？
Tailwindcss 是一個(gè)功能類(lèi)優(yōu)先的 CSS 框架退客，通過(guò) flex, pt-4, text-center 和 rotate-90 這種原子類(lèi)組合快速構(gòu)建網(wǎng)站咙冗，而不需要離開(kāi)你的 HTML。就是記住原子類(lèi)镀岛，不要再自己想 CSS 命名一股腦子寫(xiě) HTMl 就行了翔烁！
它與常規(guī)的 Bootstrap渺氧、Bulma 和 Material UI 不同之處在于沒(méi)有提供預(yù)設(shè)的組件，比如：按鈕蹬屹、菜單和面包屑等侣背。在 Bootstrap 中創(chuàng)建一個(gè)按鈕：
<button type="button" class="btn btn-primary">Primary</button><button type="button" class="btn btn-secondary">Secondary</button><button type="button" class="btn btn-success">Success</button><button type="button" class="btn btn-danger">Danger</button><button type="button" class="btn btn-warning">Warning</button><button type="button" class="btn btn-info">Info</button><button type="button" class="btn btn-light">Light</button><button type="button" class="btn btn-dark">Dark</button><button type="button" class="btn btn-link">Link</button>得到如下：
而 Tailwindcss 沒(méi)有固定的預(yù)設(shè)樣式，所以需要自己組合：
<button class="bg-sky-600 hover:bg-sky-700 ..."> Save changes</button>結(jié)果：
為何用慨默？
一個(gè)方法贩耐、一個(gè)庫(kù)、一個(gè)框架或者說(shuō)一個(gè)新的東西的出現(xiàn)肯定是為了解決一個(gè)問(wèn)題厦取，不然它的出現(xiàn)可能毫無(wú)意思潮太。就算是手工耿做的一些無(wú)厘頭的東西，實(shí)際看著還有點(diǎn)用呢（最近他給僵尸做了一輛自行車(chē)）：
那 Tailwindcss 解決了什么問(wèn)題？可以從作者的意圖看出：
他認(rèn)為語(yǔ)義化的 CSS 并不是很好維護(hù)铡买。
其實(shí)想想自己項(xiàng)目初始的時(shí)候自己起的很有語(yǔ)義化的名字更鲁，隨著業(yè)務(wù)的變化和不同人員的更改那個(gè)起初很有意義的名字已經(jīng)名不符實(shí)。
還有我們?cè)谑褂?Bootstrap 預(yù)設(shè)類(lèi)的 UI 框架時(shí)遇到設(shè)計(jì)風(fēng)格和公司內(nèi)部不同時(shí)奇钞，重置樣式也會(huì)帶來(lái)頭疼的問(wèn)題岁经。
怎么用？
我們這里使用的是 V3 版本的 CDN（不推薦）蛇券，若想配合構(gòu)建工具看看官網(wǎng)如何使用的。V2 的 CDN 是引入一個(gè) CSS 文件樊拓，而 V3 引入的是一個(gè) script 纠亚。
<script src="https://cdn.tailwindcss.com"></script><h1 class="text-3xl font-bold underline"> Hello world!</h1>結(jié)果：
添加 hover / foucs 等狀態(tài)樣式
https://tailwindcss.com/docs/hover-focus-and-other-states
<h1 class="text-3xl font-bold underline hover:bg-violet-600"> Hello world!</h1>結(jié)果：
看下 hover 是如何實(shí)現(xiàn)的：
我們之前給某個(gè)樣式添加 hover 如何做？
.btn-primary { background-color: #0ea5e9;}.btn-primary:hover { background-color: #0369a1;}在 Tailwindcss 中不是給現(xiàn)有的 class 添加一個(gè) hover 狀態(tài)筋夏，而是新增一個(gè)特定功能的 class :
.bg-sky-500 { background-color: #0ea5e9;}.hover\:bg-sky-700:hover { background-color: #0369a1;}這樣有類(lèi)似 hover 樣式的就可以復(fù)用了蒂胞。
學(xué)習(xí) Tailwindcss 的期初負(fù)擔(dān)在于記憶類(lèi)名，還好都是有規(guī)律可循的：
