day10: CSS style 规划 - utility CSS(Tailwind)-1

在前面章节我们介绍过 纯 CSS, CSS in JS 那接下来我们要来介绍 utility CSS。什麽是 utility CSS 就如其意思,他是以功能为优先的 CSS,像是如果大家有用过 bootstrap 或是 bulma 等 css library 其实 utility-first 就是类似这样的 CSS,帮你把所有 CSS style 以 class 命名好,之後只要引用 class 就可以产生样式,而 Tailwind 正式最近正流行，他是 utility-first CSS 且客制化功能也很强大的一个 library。

譬如我在 react jsx 中搭配 Tailwind css 只要这样写,就可以给 div 具有 padding-lef 20的样式，在 Tailwind 中 p-20的 p後面的 -1 是 1 比 0.25 rem, 所以会产生一个样式具有 padding-left: 5rem; 的 div。

<div className="p-20"></div>

Tailwind 优点

与其他 CSS library 相比,譬如 bootstrap 会有一些 Nav 或是 Modal 的元件,会引入一些除了功能性的 CSS,会造成 CSS code 的档案过大,且有些 CSS code 过大,另外也不用学习框架的 class 独特命名,只要具备 style 知识,就可以快速上手 Tailwind 的 class。

https://tailwindcss.tw/

https://www.rocksolidknowledge.com/articles/switching-to-tailwind-css#:~:text=Utility-first CSS frameworks give,%2C such as margin-bottom.