尤川豪   ·  9月前
304 貼文  ·  218 留言

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

  分享   共 686 次點閱
共有 1 則留言
尤川豪   ·  9月前
304 貼文  ·  218 留言
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.

 
您的留言
尤川豪
304 貼文  ·  218 留言

Devs.tw 是讓工程師寫筆記、網誌的平台。隨手紀錄、寫作,方便日後搜尋!

歡迎您一起加入寫作與分享的行列!

查看所有文章