前言
前段時間，laravel更新8.0版本，系統內置的Jetstream應用支架使用的是Tailwind CSS，於是勾起了我對Tailwind CSS的興趣。
后來項目中也是逐步使用，總體感覺超級爽。就像他的簡介一樣Utility-First效用優先的CSS框架。
相比bootstrap，semantic ui antd這些組件庫，tailwind只是個css庫，簡單的說就是可以完成任何ui交互，而上面的組件庫一般就是做個后台應用，所以使用tailwind的環境更廣泛一些。
幾個亮眼的地方
首先是響應式設計。
css的媒體查詢寫起來還是比較麻煩的，如下：
@media only screen and (max-width: 760px) {
.navbar {
width:100%;
}
}
使用了Tailwind CSS就免去這些繁瑣的東西。默認情況下，Tailwind使用移動優先斷點系統，類似於您在Bootstrap或Foundation中可能使用的系統。
這意味着未加前綴的實用程序（如uppercase）在所有屏幕尺寸上都有效，而帶前綴的實用程序（如md:uppercase）僅在指定的斷點及以上斷點生效。
如下一段代碼就可以實現不同尺寸顯示不同樣式，是不是比媒體查詢寫法方便很多呢！
<div class="bg-red-500 sm:bg-green-500 md:bg-blue-500 lg:bg-pink-500 xl:bg-teal-500"></div>
當然了，媒體尺寸斷點也是可以自定義的。
// tailwind.config.js
module.exports = {
theme: {
screens: {
'tablet': '640px',
// => @media (min-width: 640px) { ... }
'laptop': '1024px',
// => @media (min-width: 1024px) { ... }
'desktop': '1280px',
// => @media (min-width: 1280px) { ... }
},
}
}
第二方面是Postcss運用
Tailwind CSS結合了 postcss，將基礎的 css 全部拆分為原子級別，同時還補全各種瀏覽器模式前綴，兼容性更好。例如：border: 1px solid #eee;拆分為：border-width、border-style、border-color
而且還支持根據自己設計稿定義契合自己項目的 csss 原子，這點真的很棒。第一，如果不是為了快捷開發，恐怕不會有太多人完全滿意傳統 CSS 框架的樣式設計。
第二，傳統 CSS 框架通過“覆蓋”進行定制。一般來講，健康的做法是覆蓋框架提供的變量，但是定制能力很有限。臟一點的做法就是手寫 CSS 覆蓋框架原生樣式，但是原生樣式之復雜（各種父級的不同情況，偽類的不同情況），哪怕一個小的組件，你也無法面面俱到。並且你最好得看源碼。
第三方面是可維護性問題
就拿我們實現一個按鈕效果來說，使用utilities class實現的話如下：
<!-- Using utilities -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Button
</button>
如果說有比較常用的，這里還能使用@apply指令圍繞通用實用程序模式創建抽象，可以輕松解決此問題。
<!-- Extracting classes using @apply -->
<button class="btn btn-blue">
Button
</button>
<style>
.btn {
@apply font-bold py-2 px-4 rounded;
}
.btn-blue {
@apply bg-blue-500 text-white;
}
.btn-blue:hover {
@apply bg-blue-700;
}
</style>
這樣維護起來也比較方便，相比bootstrap等這些框架，顯得更加靈活，可操作性更強。
結語
總的來說，Tailwind CSS改變了傳統的方式，這樣的寫法代碼量遠遠少於傳統寫法，可以大大節約開發時間，提高開發效率，我是真的有被驚艷到，你感覺怎么樣呢？
