Tailwind：我们是否将我们锁定在 CSS 之外？
Tailwind：我们是否将我们锁定在 CSS 之外？
开发人员非常关注他们是否可以，他们没有停下来思考是否应该这样做。
Background Photo by 弗洛里安橄榄 on 不飞溅 (I know it’s not CSS )
在各种不同的项目中使用过许多 CSS 解决方案后，我现在已经开始将 Tailwind 用于中等规模的产品。实用程序类的概念已经存在了很长时间，我之前一直在使用它，主要用于间距。
通常，您编写的组件本身不应该有任何外边距。相反，父元素应该决定组件的定位方式以及它与页面其他部分的间距。所以而不是创建一个包装器 <div> 或者给组件另一个多余的类名（ <Card class="card"> ），例如，我可以只写 <Card class="m-5"> 给它一个余量。这很棒，可以节省时间，作为开发人员，您只需要了解抽象 米-5 代表 边距：5px； 或您的间距系统定义的任何内容，以有效地使用它。
Tailwind 将其提升到了一个全新的水平，并问：如果你 只要 使用实用程序类并将您的全局主题直接融入其中？那不是超级快速和容易吗？
次优的开发人员体验
我在这种方法中注意到的是，一旦你的样式变得比这里的填充或那里的文本颜色更复杂一点，你的 HTML 的类字符串就会变得非常长且难以阅读。我猜这是迄今为止对 Tailwind 最常见的批评，并且没有真正的答案来反驳这一论点。
只需从 Tailwind 网站的官方示例中查看以下代码段：
<button class="px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2">信息</button>
很难阅读，不是吗？ Tailwind 爱好者对此的主要看法是：“是的，它很难阅读，但至少它与 HTML 位于同一位置，如果你不是用 Tailwind 编写的，那么无论如何你都必须在 CSS 的其他地方编写它并提供一个类名。命名是困难且有问题的！”
这是真的！命名类可能很难且不一致。如果您将这种方法与包含数千个类和样式的全局样式表进行比较，那么是的，无论如何，请改用 Tailwind！但如今的现实却是另一番景象。所有主要的前端框架，如 React、Vue 或 Angular，都允许您将 CSS/SCSS 与您的组件放在一起并确定其范围，因此您不必担心样式或全局命名问题。与 Tailwind 相比的巨大优势在于，您实际上可以编写具有适当突出显示和结构的 CSS/SCSS。
另一个优点是浏览器中的检查模式。在开发模式下运行 React/Vue/Angular 项目时，您可以通过浏览器轻松检查应用的样式。它们的结构与您在文件中编写的完全一样，您可以轻松地摆弄不同的值。如果您即时更改了很多值，您甚至可以将它们直接复制并粘贴回您的代码中。
看看使用 Tailwind 时检查模式的外观：
Scattered Tailwind styles in inspect mode
您唯一的选择是切换或更改全局实用程序类样式，或在特定元素上覆盖它们以尝试使用。
无法复制来自 Web 的 CSS 片段
复制和粘贴当然不限于浏览器检查模式和您的文件。让我们在这里真实一点，我们工作的很大一部分是在网上搜索已经由其他人编写的内容。因为 CSS 已经存在了几十年，并且被用于每个 Web 前端，所以资源是巨大的。
记得那十年 StackOverflow 帖子 这向您展示了如何使绝对定位的元素居中？或者生成的小帮手 一个纯 CSS 工具提示框 为你？所有这些工具和帖子都不能直接与 Tailwind 一起使用。相反，您必须将找到的样式转换为 Tailwind 类并手动键入它们。如果你问我，那就太乏味了。
随着 Tailwind 的日益流行，当然也有很多专门针对这个框架的好资源。我必须给 Tailwind 的一点是 如果 你使用 Tailwinds 默认类 和 找到适合您的框架和用例的组件，您可以直接复制该组件，样式将开箱即用。但我仍然认为，与框架无关的 CSS 资源远远超过了可用于 Tailwind 项目的资源。
学习抽象，而不是 CSS
我想说的最后一点是，整个 主意 Tailwind 的目的是抽象出样式，这样您就不必编写 单行 CSS .现在对很多人来说，这可能听起来很棒。但我们生活在一个框架变化速度快于关于它们的技术会议的世界中。下一个热门造型解决方案出现只是时间问题。当这种情况发生时，你了解到的事实 圆形 代表 边界半径 在 Tailwind 中可能会变得无用。
React 或 Remix 等前端框架将其列为其优势之一，您基本上只需编写 JavaScript/TypeScript。而且，如果您为下一个 Web 项目更换工作或技术，那么您至少可以应用从过去经验中学到的基本语言知识的机会非常高。
CSS 是并且将会是（至少在很长一段时间内） 这 您在设计网站时使用的语言。多年来，您的营销或设计部门的同事通常会对 CSS 有基本的了解。这样，他们可能可以更好地与开发人员沟通，或者自己对代码进行一些小改动（当然只有 PR 审查 ）。 A/B 测试工具通常允许您为部分访问者更改 CSS，因此无需开发人员即可轻松测试按钮颜色或位置等内容。在使用 Tailwind 时，您可能会为他们制造一个很大的障碍。
结论
Tailwind 或实用程序类通常是一个概念，它有它的位置并且会一直存在。在我看来去 只要 使用此解决方案可能会产生您直到为时已晚才意识到的问题。
认真思考 Tailwind 是否适合您。明显的好处是您生成的样式表的小尺寸，您对团队的一致性，因为他们无法对类名进行创意，以及您在开发小型项目时获得的速度。毕竟，Tailwind 带有一个功能齐全的开箱即用主题，可以让您很快进入一个外观不错的网站。
但是，在使用它时，您必须处理一个漂亮的 不同的 （我认为不好）开发人员在可读性和使用网络资源方面的经验。你也可以考虑这样一个事实，你 不是 编写真正的 CSS，因此不会直接在 Web 样式方面训练与框架无关的技能。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
