我不喜欢tailwind css

你在一家餐馆，在菜单上有一个奇怪的项目，你从来没有听过之前，但它引起了你的兴趣。听起来它可能值得一试，但你不确定。

当服务员接近您的桌子时，您可以询问菜肴;他指出，虽然大多数人最初被外表被击退，但他们仍然应该试一试，因为厨师发誓它非常美味。所以，相信他的判断，你订购了菜等等。

当你的用餐到达时，它看起来就像在菜单中那样令人不快。但是你不是一个判断 - 你愿意尝试新事物。你刻到它的一片并采取不情愿的咬伤。和......好吧，这真的不是那么大。

简而言之，这是我对尾风CSS的经验。这不是CSS最糟糕的事情，但它肯定不是巴释，它的支持者声称它是 - 事实上，它有很多问题。

看，奇怪的是我实际上阅读了所有关于语义css的所有文章的所有文章，我发现自己最初同意他的观点。亚当辩称，整个“语义CSS”范式在实践中没有平移，而开发人员倾向于倾向于在职业生涯的过程中倾向于探讨效用CSS的方法。根据这个范式，您的类名应尽可能粒度，负责一个主要任务。这些实用程序类作为UI的基本构建块（“令牌”），允许您将它们链接在一起以实现复杂的设计。例如，如果您发现自己重复显示：Flex或Flex-Wrap：在您的CSS中包装，您可能希望向实用程序类摘要，如Flex或Flex-Wrap，您可以应用于任何元素。

“我已经在为什么传统的'语义类名字'是CSS难以维护的原因，但在你实际尝试之前，真相是难以保持的原因。如果你能够抑制时间来降低足够长的冲动，可以给它一个机会，我真的认为你会想知道你是如何用其他方式使用CSS的方式。“ - Adam Wathan，Tailwind CSS着陆页

在纸上，Utility CSS实际上听起来可能很有用。然而，在实践中，Tailewind CSS（以及一般的CSS）遭受了它试图解决的同一问题，并且在我诚实的意见中，不值得你的时间。

在我们讨论Tailwind CSS的问题之前，值得研究为什么首先创建框架以及它试图解决的问题。这主要涵盖在上面链接的Adam Wathan文章中，即使您不喜欢Tailwind，我强烈建议您读过。我已经提到了尾风背后的一些动机，但我会在这里重申。

人们赞成尾风的一个论点通常是“语义CSS”方法是有缺陷的，因为你的命名良好的CSS课程给出了虚假的秩序和原因，当实际上有很多复杂的复杂（并重复）CSS中的逻辑。难以提出一致的间距，颜色和其他设计指南标准，这可能导致臃肿的CSS和不一致的UI。尾风旨在解决这些问题。

这是亚当在他的文章中使用的论点之一。他指出，通过语义CSS方法，HTML对CSS的这种固有耦合，您的HTML类指示CSS或反之亦然。因此，整个“关注的分离”原则是因为你的HTML和CSS彼此依赖。

“我”分开了我的担忧“，但我的CSS和我的HTML之间仍然是一个非常明显的耦合。大多数时候我的CSS就像我的标记的镜子;完美地反映我的HTML结构与嵌套CSS选择器。

我的标记并不关心造型决策，但我的CSS非常关注我的标记结构。

也许我的担忧毕竟没有那么分开。“ - CSS实用课程和“关注的分离”

原则上，这是有道理的。但正如我们所看到的那样，Tailewind实际上并没有解决这个问题“分离问题”。它实际上介绍了其他几个问题。

随着这种方式，让我们来看看我不喜欢Tailwind CSS的原因。

其他不喜欢Tailwind的人倾向于通过争辩说它使您的HTML看起来嘈杂，令人作呕，而且我会这样做。老实说，如果您关心您的开发人员体验，这是一个有效的论点。 Tailwind使您的标记很难读取我想在这里探索的几个原因。

首先，像Bootstrap一样，它是语义上的模糊，因为它的所有类名都是笨拙的缩写。这意味着您必须先首先学习Tailwind的特定语法，然后才能将其公用事业类集合在一起以实现强大的结果。所以，当你第一次用尾风开始时，事情实际上会很慢，你会发现自己经常引用文档来找到正确的类。在熟悉该框架之前，快速原型设计的初始承诺是完全的。

在我的个人经历中，糟糕的命名惯例（或一般的变量名称差）是当别人阅读你的代码时很多混淆的来源。我宁愿查看有填充的一些CSS：0.25REM或边际：0.5REM而不是尝试向他们的CSS等价物精神映射到尾部的P-1或M-2。 Vanilla CSS和CSS预处理器如SCSS或更少，当您阅读时，不要强加大部分精神负担。 TaileWind与媒体查询更糟糕 - 如您所猜，以前缀类名称的形式：

Tailwind难以阅读的另一个原因是因为它需要你水平地绕过眼睛而不是垂直。您知道Designers如何建议您将副本留在页面上的副本，在60个字符的某个位置，使人们更容易阅读？这是因为你的文字越宽，读者的眼睛跳到下一行越困难，并且发现你在水平文本的墙上寻找一个特定的词就越困难。然而，这是尾风迫使你做的事情。当您将一堆类名称在一起时，您将获得标记，如下所示：

＆lt; div类=＆＃34; w-16 h-16圆形文本 - 白色bg-black py-1 px-2 m-1 text-sm md：w-32 md：h-32 md：圆形md md ：文本基础LG：W-48 LG：H-48 LG：Round-LG LG：Text-LG＆＃34; ＆gt;哎呀。 ＆lt; / div＆gt;

不幸的是，eslint / verettier甚至不会正确地格式化您的类或将它们推入新行 - 它们只需按下ClassName Prop，但字符串本身就可以永远地继续。这可能强制您水平滚动编辑器以查看类的完整列表。 TaiLwind自己的文档遭受了这个非常问题 - 许多代码块溢出水平溢出并强迫您滚动以在串海中找到相关类。

在CSS Land中，事情更容易解析 - 您只需垂直扫描代码，因此可以更轻松地搜索特定的属性：值对。此外，您获得了适当的语法突出显示，它清楚地将您的属性与值分开，并更容易读取。使用Tailwind，您的所有课程都使用您的编辑器的颜色来串。没有属性或价值观，因为他们已经填充到类名称本身。

.thing {宽度：16px;身高：16px;白颜色 ;背景颜色：黑色;填充：0.25REM 0.5REM;边缘：0.25REM;边界半径：0.25REM;字体大小：0.875REM;线高：1.25REM; @Media屏幕和（min-width：768px）{.thipth {width：32px;身高：32px;边界半径：0.375REM;字体大小：1REM;线高：1.5REM; @Media屏幕和（min-width：1024px）{.thing {width：48px;身高：48px;边界半径：0.5REM;字体大小：1.125REM;线高度：1.75REM; }}

如果您正在跟踪UI错误，并且您知道它不在您的平板电脑/桌面版本中，那么您可以简单地忽略媒体查询块并专注于基本样式。在Tailwind-Land中，您必须在水平扫描类时精神上排除响应类名称，然后您必须弄清楚所有这些单独的部分如何合适地创建UI的最终外观。我发现它很容易阅读上面的CSS，看看发生了什么。有明显的关注分离，这是一件好事。

我与tailwind的另一个抱怨是，与CSS不同，它不允许您将选择器链接以避免重复自己。因此，如果您的所有活动，悬停和焦点状态都需要相同的CSS，您将非常快速地膨胀您的课程。使用CSS，您可以执行以下操作：

虽然我们在语义和易读的主题上，但让我们在房间里的最后一个大象致辞：代码评论。我很幸运只能在当地沙箱中的Tailwind CSS工作，而不是在任何生产项目中或其他Devs的实际团队中。

我很乐意阅读其他人的代码，并对他们的逻辑感到逻辑，并将标记与他们的CSS相关联。但如果我必须看看PR的〜1000 LOC变化，而且大部分来自班级的班级名称，我不会快乐。我也将更加困难，提出可以消除冗余CSS或简化标记的建议。

它是在语义CSS世界中过载的信息，我们首先在命名的类或ID的帮助下进行标记，然后我们用具体的CSS规则精神使这些“东西”联系起来。一切都更容易解析，因为我们一次服用一件事，并且语义课程有助于我们了解我们正在寻找的东西。

用尾风，你被迫在飞行中解释语义。最初写过代码的人可能对他们在他们的背后的某个地方有所了解。但他们现在可能忘记了它，你必须猜测特定的一片标记是由阅读课程的字母表汤负责的。

看起来，我不喜欢Tailwind的原因。但他们都没有关于我作为供应商锁定的那样。这就是为什么我不想投资时间在将现有项目迁移到Tailwind时，以及为什么我为什么不愿意将其用于任何新项目。

一旦您使用TailWind构建一个应用程序，将来将其移动到任何其他CSS框架或图书馆将来会恢复艰难。有风的工具可以将现有的CSS转换为Taiwwind，这听起来像是一个相当简单的事情。毕竟，Tailewind只是将“化合物”语义课程分解为具有单一职责的“原子”实用课程。如果您有。应用一堆CSS的东西，那么您可以轻松地将.Some-Things的CSS规则映射到Tailwind类。

但我无法想象它可以创建一个反向的工具：将TailWind转换为语义HTML和CSS。您唯一可以逼真地转换Tailwind，是其他一些实用程序框架（例如，Bootstrap），锁定您自己的语法和类名。

因为Tailwind类是只做一件事的原子构建块，因为你无法在没有手工组装这些课程的情况下在没有组装这些课程的情况下建立更复杂，语义的东西。毕竟，无论如何，自动化工具会对您所需的命名约定作出什么假设？我正在看的这个div，或img或img是什么？我怎么称呼它？

如果您使用Tailwind，除非您可以通过手动将所有CSS转换为语义CSS，除非您可以粘在一起。如果你想在未来的任何事情上搬到任何东西，那不是尾风，祝你好运。您要么需要创建自己的内部实用程序框架或使用另一个。无论哪种方式，当工具锁定在特定范式中时，它永远不会是一件好事，没有出路。

实用程序CSS本质上破碎和膨胀。为什么？因为您介绍的每个新类名都可能具有数百个属性值组合，并且转换为更多编译的CSS - 当然，这意味着更大的网络请求，并且可能更慢的性能。

看起来没有像伪类选择器一样：悬停，：焦点，：活动，以及：焦点 - 内在看，看看为什么这是如此大的交易。事实上，Tailewind非常了解的问题是一个问题。只需阅读其文档：

由于文件大小的注意事项，默认情况下，所有伪类变体都不会为所有实用程序启用，但我们已尽力启用开箱即用最常用的组合。

译文：尾风是一种昂贵的抽象，其创造者已经尽力隐瞒你的这个事实。

所有尾部课程都只做一件事，那是干燥的，这是一件好事，因为有人这么说。但是......让我们这么想一下：尾风是可重复使用的，并“干净”，因为它的销售？

对于一个，普通CSS课程的伟大事物是他们通常不做一件事。毕竟，这就是为什么课程中存在的原因 - 帮助您将相关的样式组合在一起，以便您可以重用它们。

使用TailWind，如果要在可重用的类名下将相关的样式组合在一起，则需要使用@apply指令，如在从文档中取出的此示例：

＆lt;按钮类=＆＃34; btn-indigo＆＃34; ＆gt;单击ME＆lt; / button＆gt; ＆lt; style＆gt; .btn-indigo {@apply py-2 px-4 bg-indigo-500文本 - 白色字体 - 半圆形圆形lg影子md hover：bg-indigo-700焦点：大纲 - 没有焦点：ring-2对焦：戒指-ingigo-400焦点：环形透明度-75; }}＆lt; / style＆gt;

如果它尚不明显，@apply完全违反了Tailwind的创始和指导原则。这种越狱甚至存在的事实是令人不安的。使用@apply和仅使用对应于实用程序类的CSS规则之间的区别是什么？没有区别 - 除了现在，你首先击败了使用实用程序CSS框架的地步，你最好写入Vanilla CSS开始。

TaileWind将此奇怪的冗余层添加到您的代码中，强制您在HTML类中重复Flex，MX和PY而不是重复相同的确切事项，而是在CSS中。您从中获得了什么，除了您不必为您的组件提供有意义的类名？您的实用程序类是原子构建块，肯定，但CSS属性值对也是如此。这是创建不必要的抽象来解决不存在的问题的经典案例。

在其关于实用程序和语义CSS的文章中，亚当只是开始探讨语义CSS的替代方法，当他意识到语义可以导致多个类传播的重复的CSS，没有办法在保持语义的同时在保持语义的同时调和分享的代码有点完好无损。尾风的讽刺是它声称可以解决CSS中重复的这个问题，以及语义CSS中固有的问题。但它并没有解决任何问题。它决定嫁给我们的HTML和CSS，并在一个地方保持在一个地方，因为无论如何是严格耦合的“语义”方法，所以我们也可以随着流量而进行。

但是，如果您认为这是直接编写CSS的任何更好，或者比直接应用内联样式更好地骗自己，您就会骗自己。因为而不是在CSS中重复样式，所以您现在通过类名在您的HTML中重复它们。事实上，你可能会重复自己三个，四个，可能现在有更多次，因为你不能连锁选择者。

这是一个经典党戏的误导。虽然观众的眼睛一只手固定在一起，但另一方面是它的魔力，观众惊讶。当然，你不再撰写那些令人讨厌的语义CSS，但是......你仍然撰写完全相同的CSS，伪装为类名。

有利于尾风的最常用的论点之一是在实践中难以实现语义CSS，因为命名的东西很难实现。亚当辩称，这违反了关注的分离原则，因为现在您的HTML标记要求您的CSS。有效地，您正在在您的HTML中做出真正属于CSS的决策。但让我们这么想这一点：这真的是一个问题吗？

对于初学者，如果您不确定该叫什么＆lt; div＆gt;在您的标记中，考虑是否实际需要。关于语义CSS范例的伟大事物之一是它迫使您在逻辑上和有意义地构建标记。它让您保持检查，确保您不仅仅将您的HTML膨胀，在包装元件顶部的不必要的包装元素只是为了实现您尝试构建的任何UI。

释放你的约束，Tailewind实际上可以鼓励糟糕的做法，在那里你不再需要担心讨厌的“语义”的事情，你可以扔进多个＆lt; div和gt; s，因为你想要的不关心意义。这与我早些时候携手共进的那样，关于Tailwind的易读性 - 当你在元素的组件汤中有这么多的元素时，每个人都有很长的班级名字，你甚至还有什么？你能瞥一眼吗？

其次，如果您首先努力命名事物，这表明您将在与设计人员和其他团队成员讨论您的UI时，您将沿着该行遇到沟通问题。如果您无法明确地命名UI中的X个元素，并且难以遵循该元素的对话，您将如何参考它？你打算怎么称呼那件事？当然，你可以想到一些东西。语义上总有一种方式来命名事物。

最后，请记住，我早些时候提出的是Tailwind CSS如何促销丑陋的HTML标记？该框架的支持者通常通过提醒您提醒您，您可能正在使用基于组件的框架，如反应，因此您不太可能在一个文件中查看一个巨大的标记海洋。有道理。

但是我把它带到了这里，因为如果你正在使用组件，那么你可能已经给了他们的名字，不是吗？如果您已授予您的组件，您是否可以向您的类名申请相同的模式？这是BEM这样的方法倾向于发光（尽管我更喜欢一种不涉及双下划线的伪BEM方法）。选择一个惯例并坚持下来，并命名事情变得更加容易。

简而言之，TaiLwind假装解决一个问题不是一个真正问题的问题。

一个小章节，但一个人对我来说很重要，因为我已经尝试了这个整个“utility css”的事情，而且我不相信它使我的工作更容易。作为前端开发人员，我经常发现自己通过Dev工具（与Document.DesignMode =＆＃34组合时，在我的浏览器中和那里的浏览器中的浏览器很少调整

使用TailWind，根据您想要做的事情，调整款式是非常困难或不可能的。要调整调整，您无法使用CSS本身播放 - 您必须通过双击元素窗格中双击它们并修改列表来更改类名，或者您必须修改TailWind的单责任类（哪个责任搞砸了你的其余UI）。

值得注意的是，有一个名为UI Devtools的包，用于旨在解决这个问题的TaiLwind CSS。 但不幸的是，它是Sponsorware，这意味着你必须赞助GitHub上的项目，以便能够使用它。 初始发布近两年后，Tailwind CSS仍然不支持伪元素（以及其他功能），基本CSS和CSS预处理器多年来支持。 想象一下，必须在之前写：HTML中的内容 - 空字符串，当CSS等效物很多，更清晰。 我怀疑这个功能将是非常昂贵的实现。 ......