前言

前段時間，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

第一，如果不是為了快捷開發，恐怕不會有太多人完全滿意傳統 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改變了傳統的方式，這樣的寫法程式碼量遠遠少於傳統寫法，可以大大節約開發時間，提高開發效率，我是真的有被驚豔到，你感覺怎麼樣呢？

原文連線：https://www.wjcms.net/archives/一款絕對讓你驚豔的css框架tailwindcss