尤川豪   ·  4週前
Exp. 1,997  ·  255 貼文  ·  192 留言

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 提供部份類似功能

  分享   共 152 次點閱
共有 1 則留言
尤川豪   ·  4週前
Exp. 1,997  ·  255 貼文  ·  192 留言
Since Tailwind is a PostCSS plugin...

https://tailwindcss.com/docs/using-with-preprocessors/

Because Tailwind adds some new non-standard keywords to CSS (like @tailwind, @apply, theme(), etc.), you often have to write your CSS in annoying, unintuitive ways to get a preprocessor to give you the expected output. Working exclusively with PostCSS avoids this.

 
您的留言
  贊助本站開發,解鎖進階教材
尤川豪
Exp. 1,997  ·  255 貼文  ·  192 留言

關於作者

Devs.tw 作者,喜歡分享&建造新東西的工程師。

歡迎在 Facebook 追蹤我!不定期分享有趣技術文章!

  查看個人檔案