前言
在 2022 CSS 调查 中 Tailwind 都是最受欢迎、最多人使用的 CSS 框架，它开创性的设计理念打破了传统语义化架构 CSS 的方式，于是问题来了：「需要学 Tailwind 吗？」、「Tailwind 和 XX 框架要选哪个？」、「要花多久学习？难度曲线会很高吗？」……等问题。碰巧我比较早入坑也是它的爱用者，因此来分享一下心得。
Tailwind 基于 Utility-First 的理念，相较于传统追求「语义化」的命名 CSS，所有的样式都是以「工具」的形式提供，举例官网首页的例子：
这就是 Utility-First 的 CSS 写法，感觉和直接写行内 CSS 没两样？如果你是一个遵从传统「语义化 class 名称」的开发者，可能会觉得这看起来是一种邪教！但敞开胸怀去了解每种方式的利弊，会发现它们各自有优缺点，并不存在纯粹正确或错误的答案。
使用 Tailwind 的 3 大理由
为了方便读者吸收，我会把所有特征浓缩在三个要点之类，根据我使用上的心得，详细还是可以看看更深入探讨的文章～
-
事情简单许多：
-
没有重复的样式：Tailwind 很聪明的会去除没有用到的样式，除了减少 CSS 的大小之外，在 2.1 版的 JIT 引擎可以在开发时飞快的产生出可使用的 CSS 文件。
- 系统化：Tailwind 默认有完整的 CSS Reset 与设计系统，包含颜色、尺寸、字体样式、阴影，你可以在 Tailwind 文档 找到完整的说明。使用预先构建好的设计系统让你比起从头手刻网页更快速且有稳固一致的基础来构建网站。
不使用 Tailwind 的 3 个理由
有「应该使用的理由」外也应该考虑反方面导入这个工具对你的影响，这里列出的理由是我在使用 Tailwind 的过程中可能会遇到的困难：
- 单纯反对 Utility-First 的写法：如果你讨厌看似混乱的 class 名称、只遵从传统的语义化命名的开发者也没事，这单纯不是你的菜！
- 没有耐心或能力去设计页面：Tailwind 虽然提供很基础的设计系统，但过多的自由与客制化可能会让你无法控制网页的样式，这时候你可能需要一些 Tailwind 组件库像是：DaisyUI、Flowbite、Tailwindcomponents 来解决这个问题。极端一点，如果你只是单纯需要一个清晰好用的 UI，并没有一丁点想要客制化样式的念头，那么现成的样式库会更适合你的需求，像是：Bootstrap、Pure。
- 独特的学习曲线：如本篇文章标题「不需要学 Tailwind 也可以用 Tailwind」，学习它会是一个非常独特的学习体验，如果你熟悉原生 CSS 那么整个体验是非常愉快的。但如果对原生 CSS 不熟悉仍「强制」会需要熟悉 CSS，这个过程可能会让人感觉很煎熬痛苦，但实际上大多时候只是在回头学基础的 CSS 而已，而不是某个样式库具体如何使用。
总结
要怎么开始？我会建议先看看 Tailwind 官方文档，并且一边在 Playground 试试水温，这样就可以在不用安装任何东西的情况下就可以开始使用 Tailwind 了。正式使用可以再进入官方的文档中学习如何使用 NPM 安装。
放手试试看吧！在我使用 Tailwind 之前，已经对 CSS 有一定的熟悉度，引此导入这个工具能够能花更多心思去思考如何构建想要的网站，而不是太多时间去思考 CSS 的命名与构建设计系统；至于不熟悉 CSS 的新手就真的不晓得会是怎么样的体验了 😅，但如果把 Tailwind 当成一个更抽象一层的 CSS 说不定也是一种不错的学习路径，谨记一次攻克一个区域的挑战才不会有蜡烛两头烧的感觉 😑。
此外如果你是单纯认为 Utility-First 不是一个好选择，但又想要系统化的撰写 CSS 可以考虑看看 Open Props。