使用 Tailwind挣惰，可以通過(guò)直接在 HTML 中應(yīng)用預(yù)先存在的類(lèi)來(lái)設(shè)置元素樣式。
聲明：代碼來(lái)自官網(wǎng)
示意圖
如圖囚聚，在以前寫(xiě)一個(gè)樣式贺拣，需要很多代碼
<div class="chat-notification">
<div class="chat-notification-logo-wrapper">
<img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
</div>
<div class="chat-notification-content">
<h4 class="chat-notification-title">ChitChat</h4>
<p class="chat-notification-message">You have a new message!</p>
</div>
</div>
<style>
.chat-notification {
display: flex;
max-width: 24rem;
margin: 0 auto;
padding: 1.5rem;
border-radius: 0.5rem;
background-color: #fff;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.chat-notification-logo-wrapper {
flex-shrink: 0;
}
.chat-notification-logo {
height: 3rem;
width: 3rem;
}
.chat-notification-content {
margin-left: 1.5rem;
padding-top: 0.25rem;
}
.chat-notification-title {
color: #1a202c;
font-size: 1.25rem;
line-height: 1.25;
}
.chat-notification-message {
color: #718096;
font-size: 1rem;
line-height: 1.5;
}
</style>
通過(guò) Tailwind蓖谢，只需要
<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
<div class="shrink-0">
<img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
</div>
<div>
<div class="text-xl font-medium text-black">ChitChat</div>
<p class="text-slate-500">You have a new message!</p>
</div>
</div>
前天學(xué)習(xí)創(chuàng)建一個(gè)next.js項(xiàng)目的時(shí)候，我承認(rèn)看到app/page.tsx這個(gè)首頁(yè)文件className里寫(xiě)的密密麻麻的 Tailwind譬涡，感覺(jué)很不優(yōu)雅（代碼我已經(jīng)刪了闪幽，但最長(zhǎng)的絕對(duì)是"p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4"這樣的三倍)
當(dāng)然，官方表示這樣做的好處分別有：
- 你不用費(fèi)勁想類(lèi)名涡匀，而這么一個(gè)類(lèi)只在當(dāng)前布局生效
- 可以少些很多 CSS盯腌，讓你的 CSS 文件變得精簡(jiǎn)
- 當(dāng)你需要改動(dòng)樣式時(shí)會(huì)很安全，可以避免影響到其他整體（考慮到復(fù)用）
又有一個(gè)疑問(wèn)陨瘩，既然 Tailwind 也需要寫(xiě)那么長(zhǎng)腕够，為什么不直接寫(xiě)內(nèi)聯(lián)樣式？
官方對(duì)此提出相比于內(nèi)聯(lián)樣式舌劳，Tailwind 的幾個(gè)優(yōu)點(diǎn)：
- Designing with constraints（有約束的設(shè)計(jì)帚湘，沒(méi)怎么看懂這個(gè)翻譯）對(duì)第一點(diǎn)我的理解是，Tailwind 將常用場(chǎng)景都弄好了甚淡，你可以直接用大诸，方便樣式上統(tǒng)一
- 響應(yīng)式，Tailwind 可以很方便的寫(xiě)出響應(yīng)式頁(yè)面，而內(nèi)聯(lián)無(wú)法使用媒體查詢(xún)
- 懸停资柔、焦點(diǎn)等 CSS 狀態(tài)焙贷，這也是內(nèi)聯(lián)樣式無(wú)法實(shí)現(xiàn)的（這個(gè)確實(shí)很不錯(cuò)）
最后，官方表示維護(hù) Tailwind 比大型的 CSS 文件要容易許多建邓，很多國(guó)外大廠(chǎng)也在用，并且效果很好睁枕。
