直到几年前，当涉及到前端样式时，通常的做法是根据 BEM 等命名约定提出唯一的类名称，并通过往返 CSS 文件来创建设计。 但现在，“Tailwind CSS”的出现彻底改变了这种情况。为什么实用优先的理念吸引了如此多的开发商？
这次，对于那些正在考虑实施Tailwind CSS的人，我们将彻底分析它的优点和缺点。
好处1：免去对类名的深切担忧
“我们应该为这个按钮的包装元素命名什么……‘button-container’？‘action-wrapper’？” 你是否曾经因为这些无用的想法而浪费过时间？ Tailwind 将简短的预定义实用程序类（“flex”、“p-4”、“text-center”等）直接添加到 HTML 中，完全消除了命名类的心理负担。
好处 2：消除上下文切换
在传统开发中，不可避免地要在编写 HTML（或 JSX）、打开 CSS 文件和返回 HTML 之间来回切换。 Tailwind 直接在标记中编写样式，减少了眼球移动和文件导航，让您可以在不中断思考的情况下组装组件。这比你想象的更快的开发速度。
缺点 1：HTML 看起来“脏”
Tailwind 的一个常见批评是 HTML 类属性变得太长，降低了可读性。 确实，一个复杂的组件有几十个类，乍一看很难理解发生了什么。为了避免这种情况，React和Vue等框架需要划分为组件单元，并进行设计以防止单个文件变得太大。
缺点2：很难获得独特的CSS知识
因为我们过于依赖方便的实用程序类，所以我们往往忽略了对底层原始 CSS（Flexbox 规范、Grid 机制等）的理解。如果您不理解和使用 Tailwind 的类名（它们所映射到的 CSS 属性），您在创建自己的复杂动画和布局时可能会陷入困境。
项目适宜性诊断
那么，Tailwind CSS适合什么样的项目呢？ 总之，任何使用面向组件的现代框架（例如 React/Next.js/Vue/Nuxt）的项目几乎肯定会受益。另一方面，如果您有一个仅使用旧的 HTML 文件构建的静态站点，或者一个没有重用组件概念的环境，则结果可能只是更长的代码。
了解优势和劣势，并在正确的地方使用这个强大的武器。