“有了這個玩意，我可能不用引入 css 預處理語言，畢竟我可能不寫 css。” —— 我自己說的
Atomic CSS（原子 CSS）#
在知道 Tailwind CSS 之前，得先知道一個概念，就是原子 CSS，它的概念解釋起來十分簡單，即所有 CSS 類都有一個唯一的 CSS 規則。
這樣寫的方法有一些好處
- 不會出現樣式衝突，因為每個類都是唯一的，不會有重複的類名。
- 同時移動 html 元素的時候，也不會出現樣式丟失的情況。
- 刪除新特性的時候，也能夠確保其樣式同時被刪除。
/* 原子 CSS */
.bw-2x {
border-width: 2px;
}
.bss {
border-style: solid;
}
.sans {
font-style: sans-serif;
}
.p-1x {
padding: 10px;
}
在使用這種寫法之前，我們需要先定義好一些常用的類名，比如上面的.bw-2x，.bss，.sans，.p-1x，然後才可以進行開發，如果這一套樣式是由別人寫好的，我們也不得不去學習這一套樣式，並且學習其類名的約定，這樣就會增加我們的學習成本。甚至我們需要的樣式是這一套樣式中沒有的，那麼我們就需要自己去寫。
Tailwind CSS#
神說：要有樣式，于是有了 Tailwind CSS
神說：要有光，于是有了光。
Tailwind CSS提供了一些公用的命名約定。通過一個配置文件，你可以為你的网站生成一套專屬的實用工具 CSS。它是一套完整的設計系統，需要能提供開箱即用的功能，滿足 80% 的業務場景；同時需要支持良好的擴展機制，滿足另外 20% 的業務場景。
自定義配置#
Tailwind CSS 提供了一些配置項，可以在tailwind.config.js中進行配置。當一個項目的 UI 設計已經有了一套明確的規範（字體大小、主題色、按鈕大小等），我們可以通過配置文件來生成一套符合規範的 CSS 類名。
// tailwind.config.js 官網實例配置
module.exports = {
content: ['./src/**/*.{html,js}'],
theme: {
colors: {
'blue': '##1fb6ff',
'purple': '##7e5bef',
'pink': '##ff49db',
'orange': '##ff7849',
'green': '##13ce66',
'yellow': '##ffc82c',
'gray-dark': '##273444',
'gray': '##8492a6',
'gray-light': '##d3dce6',
},
fontFamily: {
sans: ['Graphik', 'sans-serif'],
serif: ['Merriweather', 'serif'],
},
extend: {
spacing: {
'8xl': '96rem',
'9xl': '128rem',
},
borderRadius: {
'4xl': '2rem',
}
}
},
}
支持任意值#
Tailwind CSS 提供了一套類名對應的樣式，我們可以通過w-1/2來設置寬度為 50%，也可以通過w-1/3來設置寬度為 33.3333%，但是總有樣式是框架沒有提供的。
Tailwind CSS 就提供了一種任意值的類名規則，如果我們需要設置寬度為 50px，可以通過加入w-[50px]的類名來實現，這種方式對其他的 CSS 屬性任意值也是同樣適用的。
響應式設計#
Tailwind 中的每個功能類都可以有條件的應用於不同的斷點（有點像 Bootstrap 呢），這使得可以輕鬆的構建複雜的響應式界面而不用離開 HTML。 默認的情況下 Tailwind 會為你生成以下幾個斷點：
- sm 640px @media (min-width: 640px) { ... }
- md 768px @media (min-width: 768px) { ... }
- lg 1024px @media (min-width: 1024px) { ... }
- xl 1280px @media (min-width: 1280px) { ... }
- 2xl 1536px @media (min-width: 1536px) { ... }
@apply 抽離 / 復用#
由於需要做響應式，所以一個類名需要根據斷點寫多種去適應不同的尺寸。這樣，一個標籤裡面難免會存在幾十個類名，會影響代碼的閱讀體驗，甚至後續也難以維護以及拓展。Tailwind CSS 提供了 @apply 指令用於將現有的類名內聯到自己自定義的 css 中。
.my-class {
@apply h-48 w-full text-lg font-bold text-gray-900;
}
文件會很大嗎？#
對的！因為它需要把所有的 CSS 屬性全部都封裝一遍，所以 CSS 文件巨大。於是 Tailwind CSS 在構建的過程中引用了PurgeCSS，以此找到所有未使用的類名，以確保他們不會一塊被打包，所以打包構建不用擔心文件會很大。
說說缺點#
- 由於 Tailwind CSS 是基於類名的，所以在使用的時候，需要對類名有一定的了解，否則就會出現一些不必要的樣式。
- 標籤裡邊會有大量的類名，會顯得醜陋，閱讀體驗不好，後期維護修改多少有點不便。
- 需要搭配 UI 規範，否則多人開發不好維護。
實際使用#
html/css 實現
<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>
Tailwind CSS 實現
看起來簡單了很多😋
<div class="max-w-sm mx-auto flex p-6 bg-white rounded-lg shadow-xl">
<div class="flex-shrink-0">
<img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo" />
</div>
<div class="ml-6 pt-1">
<h4 class="text-xl text-gray-900 leading-tight">ChitChat</h4>
<p class="text-base text-gray-600 leading-normal">
You have a new message!
</p>
</div>
</div>
最後#
原子化 css 個人感覺是個值得關注的趨勢，目前 Twitter、facebook Meta 等大廠都在使用。
如果團隊是根據一套設計規範去進行設計的話，用 Tailwind CSS 會非常舒服。同時個人感覺用其寫佈局非常爽，幾個 class 就可以解決問題，不需要再做無意義的命名。😆
這只是我個人使用的一些想法，如果感興趣的話我建議親自使用一下。✍️
這裡也推薦下 antfu 寫的 Unocss - 具有高性能且極具靈活性的即時原子化 CSS 引擎。
最後希望大家 CSS 完全理解。💡