前言
前段時間，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 ></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 >
Button
</button>
如果說有比較常用的，這里還能使用@apply指令圍繞通用實用程式模式創建抽象，可以輕松解決此問題，
<!-- Extracting classes using @apply -->
<button >
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改變了傳統的方式，這樣的寫法代碼量遠遠少于傳統寫法，可以大大節約開發時間，提高開發效率，我是真的有被驚艷到，你感覺怎么樣呢？
原文連接：https://www.wjcms.net/archives/一款絕對讓你驚艷的css框架tailwindcss
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/218279.html
標籤：PHP
上一篇：呼叫百度API實作人臉識別
下一篇：MATLAB實體：二維高斯分布圖