此系列文章已改編成書,歡迎購買:https://www.tenlong.com.tw/products/9786267146460?list_name=i-r-zh_tw
官方文件給的定義
從組合過的原生功能,來建立起複雜的元件。
在介紹 Utility First 之前,先來看一下傳統 CSS 怎麼寫。
假設我今天要切一個下方畫面:
相信一開始沒有任何網頁前端背景的人,應該是跟我一樣,從 HTML + CSS 寫出一個所見即所得的靜態網頁,而一開始寫 CSS 會建議使用語意化來命名 class name
,然後就會向下方的範例程式碼一樣,
HTML
<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">你有一則新訊息</p>
</div>
</div>
CSS
.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;
}
看得出來所有的東西都跟 chat 有關,但是只要階層一多, class 的名稱就會越來越長,慢慢的第一時間也越來越難分辨這段是什麼?
另外,要想命名也是非常頭痛的事情,如果用 Tailwind 改寫會變成如何?
<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
<div class="flex-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-gray-500">你有一則新訊息</p>
</div>
</div>
看起來的確有精簡一點,雖然最外層的 class 好像變得更長了,可是我卻一行 CSS 都不用寫!原本要在 CSS 的定義的內容,全部透過 Tailwind 的 Utility-First 的方式呈現在畫面上了!
當我第一次接觸 Tailwind 的時候,也覺得這樣也沒有比較好啊!而且變得更繁瑣,的確是這樣沒錯,但開始寫了以後會發現以下優點:
.side-wrap
這種為了命名而命名的 class name。Demo
https://codepen.io/hnzxewqw/pen/RwpJGwW
官方文件是用絕對路徑引入圖片,因我沒有該圖片,所以就直接去複製網頁中的 SVG 檔案。
inline style 就是在 HTML 上面寫上樣式,
<h1 style="color: red;font-size: 24px; padding: 10px 0;">title</h1>
但這樣會有一個問題,這只有針對這個 tag 就是 inline style 的權重較高,未來若要修改樣式,則需要找到該 tag,而使用 Tailwind 可以透過 class 定義的關係,能夠 tailwind.config.js
輕易修改多個樣式。
嗨~我很高興有人也做 Tailwind 主題!
這篇的文件有中文版哦~
分享一下 https://tailwindcss.tw/docs/utility-first
請多指教~一起推廣 Tailwind 吧
哇~是搋兔大大,小弟獻醜了!