Tailwind CSS

https://tailwindcss.com/

這種 css 風格叫 utility-first，真心覺得很不錯

一個藍色小按鈕的寫法

<!-- Using utilities: -->
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">
  Button
</button>

也可運用 @apply 功能改寫

<!-- Extracting component classes: -->
<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-600;
  }
</style>

乍看之下違反一大堆傳統 css 建議指南（e.g, class name should be semantic）

實務上卻好處多多，值得一試

tips: Bootstrap 4 utility section 提供部份類似功能