为什么我开始使用tailwind

到今天为止我尝试使用tailwind已经一周了。开始使用tailwind是一个非常艰难的选择。毕竟在工作中，我们很少使用新兴技术，我们优先选择成熟或者很老的技术，距离react 16.8已过去5年，才普及函数式编程，尽管在外部已经到了熟透的阶段。

我不仅一次的尝试过使用less或者sass去实现响应式和暗黑模式。我成功了，但非常痛苦。虽然我学会了使用sass的混合模式减少样式的编写，我也学会了使用classNames来更快的切换类名，但它真的不方便。所以我开始调查有没有一个更好的方式来实现响应式和暗黑模式。直到我遇到了tailwind。

我第一次知道tailwind已经是好几年前了。当时说它在国外非常火，但在国内没市场。其实我现在也是这么认为的。如果只是想写出一个页面，那么根本不需要tailwind。它的劣势极其明显，复杂的页面会出现大段大段的tailwind样式语句；官方文档中并不推荐将样式合并，这直接导致了样式需要通过复制粘贴的方式；调试起来极其麻烦，因为没有直接的css，控制台中没有办法很好的展示。论坛上都说它解决了要想类名的问题，但这明显是捡了个芝麻丢了个西瓜的事情。

但是我还是开始使用tailwind了。因为这可能是现阶段想要构建更强大的前端页面最好的方式，没有之一。现代网页和传统网页最大的区别就是性能更好，更美观了。在用户眼里最大的变化也是更美观了。想呈现出这种美观度，就需要更大的成本。比如说响应式，想让项目既能支持手机平板又能支持PC，那么传统的方式是使用媒体查询。我尝试过利用sass，分成两部分，在颜色、字体大小等在媒体查询里写，其他内容独立出来，尽量使重复代码减少。如果把一个页面，嵌套后的css看作一个独立的单元。那么要想实现多端使用，那么就需要4套。一个页面4套，当页面一多，就造成了难以维护的状态。

tailwind解决了这个问题，但是又没完全解决。现在你可以在一个类名中把所有的场景都列出来。无论是暗黑模式还是不同的大小设备，都在这一个类名中写完。但是冗长的类名又成了负担。

example：

 <div className={clsx(
          "max-sm:h-10 max-sm:bg-gray-100 max-sm:text-xs",
          "sm:h-20 sm:bg-gray-200 sm:text-sm",
          "md:h-25 md:bg-gray-300 md:text-base",
          "xl:h-30 xl:bg-gray-500 xl:text-xl",
          "dark:max-sm:bg-gray-900 dark:max-sm:text-gray-300",
          "dark:sm:bg-gray-800 dark:sm:text-gray-200",
          "dark:md:bg-gray-700 dark:md:text-gray-100",
          "dark:xl:bg-gray-600 dark:xl:text-white",
        )}
      >
        响应式容器与文字大小
 </div>

在我看来，如果你的产品面向C端，那么有必要使用tailwind，如果是面向B端，那么完全没有使用它的必要。如果你的用户即使用桌面端又使用移动端，那么基于两套的布局肯定不一样所以可以分成两套代码，桌面端一套，移动端一套。这样极大的减少了tailwind带来的心智负担。你不用再考虑，桌面端应该如何展示，移动端是否需要隐藏。