前言
前段時間，laravel更新8.0版本，系統內置的Jetstream應用支架使用的是Tailwind CSS，因而勾起了我對Tailwind CSS的興趣。css
後來項目中也是逐步使用，整體感受超級爽。就像他的簡介同樣Utility-First效用優先的CSS框架。 
laravel
相比bootstrap，semantic ui antd這些組件庫，tailwind只是個css庫，簡單的說就是能夠完成任何ui交互，而上面的組件庫通常就是作個後臺應用，因此使用tailwind的環境更普遍一些。bootstrap
幾個亮眼的地方
首先是響應式設計。
css的媒體查詢寫起來仍是比較麻煩的，以下：瀏覽器
@media only screen and (max-width: 760px) {
.navbar {
width:100%;
}
}
**使用了Tailwind CSS就免去這些繁瑣的東西。**默認狀況下，Tailwind使用移動優先斷點系統，相似於您在Bootstrap或Foundation中可能使用的系統。antd
這意味着未加前綴的實用程序（如uppercase）在全部屏幕尺寸上都有效，而帶前綴的實用程序（如md:uppercase）僅在指定的斷點及以上斷點生效。 app
以下一段代碼就能夠實現不一樣尺寸顯示不一樣樣式，是否是比媒體查詢寫法方便不少呢！框架
<div class="bg-red-500 sm:bg-green-500 md:bg-blue-500 lg:bg-pink-500 xl:bg-teal-500"></div>
固然了，媒體尺寸斷點也是能夠自定義的。post
// 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<div class="border-width border-style border-color"></div>並且還支持根據本身設計稿定義契合本身項目的 csss 原子，這點真的很棒。ui
第一，若是不是爲了快捷開發，恐怕不會有太多人徹底滿意傳統 CSS 框架的樣式設計。 第二，傳統 CSS 框架經過「覆蓋」進行定製。通常來說，健康的作法是覆蓋框架提供的變量，可是定製能力頗有限。髒一點的作法就是手寫 CSS 覆蓋框架原生樣式，可是原生樣式之複雜（各類父級的不一樣狀況，僞類的不一樣狀況），哪怕一個小的組件，你也沒法面面俱到。而且你最好得看源碼。.net
第三方面是可維護性問題
就拿咱們實現一個按鈕效果來講，使用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改變了傳統的方式，這樣的寫法代碼量遠遠少於傳統寫法，能夠大大節約開發時間，提升開發效率，我是真的有被驚豔到，你感受怎麼樣呢？