TailwindCSS 从零开始 - 选择该框架的原因

什麽是 TailWindCSS

近年窜起的 CSS 框架，有别於老牌 Bootstrap、Material...等以元件构成的框架，是一套纯粹以 Utility-First CSS，用许多的 class 就可以构成画面，非常适合快速切版，并且因高弹性的关系，可以达到客制化的效果。

什麽是 Utility-First CSS

说到 Utility-First CSS，先回过头介绍一般常见的 CSS framework，对於大家熟悉的 Bootstrap、Material UI...等，把 Component 都定义好，想要什麽元件就抓来用，凑起来就可以完成一个网站的 framework 不陌生。

要 navbar 或是 button，甚至 table 都可以完成，实在是非常方便。

不过，使用这些 framework 就会遇到一个问题，会听到一些客户说：「你的网站看起来好 Bootstrap 喔！」这就算了，因为已经定义好元件的内容，要客制化的话，後续会遇到维护的麻烦与困扰。

使用元件框架会遇到哪些麻烦与困扰

最不好的方式：覆盖 CSS

因原本的定义好的框架比较没有客制化的方式，或是有些网路上找到的套件很难去客制成自己的想要的样式，只好用各种覆盖的方式去改动 CSS，如果没事就没事，改完後续又要修改，就还需要花很多时间去找原本框架或套件定义的 CSS 写在哪里。但这种方式很容易把东西改坏。

下载定义好的程序码

有些框架有提供自订义的弹性，可以把相对的地方修改後再把程序码下载下来，一开始看起来会觉得这样也很好耶！可是，当以後这个专案交给其他人接手，甚至是完全没碰过这个专案的同事时，可能会发现同事怎麽改个程序码，拳头越来越硬了呢? 因为根本不知道哪些地方被改动了。

引入後再覆写 Sass

这是比较好的情况，可以引入框架的 Sass，但又覆写部分的 Sass 变数，可以调整设定，也比较不容易造成後续管理以及维护的问题，Bootstrap 就是这样。可是，如果框架已经把 UI 都定义好了，可以调整的范围就会受到不少限制。

小结

回过头来说，使用 Utility-First CSS 的时候，因是使用 class 建构出来的画面，所以要更动相对容易与方便，因为每个元件都是自己刻出来的，哪里不满意、不符需求，都可以在 Utility class 增减中完成，是相当具有弹性的。

参考资料

• 还在跟复杂的 CSS 的设定奋斗吗？用 Tailwind 来帮你实现真正的高效整洁！
• Tailwind CSS 官网