时至今日，我已经成为了 tailwindcss 的重度使用者。我的每一个项目都被我重构成为了 tailwindcss。并且我还搜索了许多 tailwindcss 相关的生态引入到项目中。但遗憾的是，用了大半年之后，我深刻的感觉 tailwindcss 也并非技术银弹，他不是一个完美的解决方案。他也存在一定程度的问题、以及一些让我感觉不舒服的点。

这篇文章就跟大家分享一下，这半年来，我的 tailwindcss 使用体验。

一、小痛：消失的语义
本身在刚开始的时候，这是一个巨大的优点。因为写代码的时候不用思考命名真的太爽了。可惜很多事情都是一体两面。爽是爽了，后期要维护的时候就有点难受了。由于标签中没有特定的语义，因此当我发现，现有布局可能无法满足我的需求，我去修改布局时总是会遇到以前不曾遇到的困境。我需要花更多的精力去熟悉之前的布局思路是怎么回事。

例如这样一段代码。

我们可以看到，光从代码上，我们很难分辨出他到底是用来干啥的，因此他非常容易成为关键布局元素的干扰项，从而增加修改布局的难度。属实是写的时候有多快乐，维护的时候就有多痛苦。经常容易改来改去的项目就很容易在这个点上感受到不适。当然，也从这个小的细节上，进一步明确了语义化的重要性。

我们可以在编写代码时，适当的加上一些语义类名，来增强语义化的作用。从而避免这种情况出现。

二、越来越少考虑样式的继承
样式的继承可以有效的代码编写量。但是... 我在使用 tailwindcss 的过程中，有一次突然发现自己好像都不咋考虑样式的继承了。什么地方需要什么样式，直接去那个元素套一个 calss 就开始手写样式，写着写着发现... 握草，产生了大量冗余的代码。

<Link
  href='https://xinyuzone.cn/column/1818097927437131776'
  className='block my-4 rounded-md bg-gray-50 dark:bg-gray-900 text-sm p-4 dark:text-gray-300 border border-gray-200 dark:border-gray-700'
  target='_blank'
>
  <Telescope className='' />
  <div className='font-bold my-2 text-sm text-gray-200 dark:text-gray-800'>...</div>
  <div className='text-xs text-sm text-gray-200 dark:text-gray-800'>...</div>
</Link>

这个东西怎么说呢，意识到之后是能够避免的。因此我也说不上来是 tailwindcss 的问题还是我人有问题，就是在很长一段时间里面，我都忘记了考虑样式的继承，从而让代码的冗余程度扩大到了远超我想象的级别。

三、复用能力偏弱
例如在一个列表里面，子项中的元素样式都一样。如果我使用 tailwindcss 来编写的话，我不得不在每一项中重复编写一样的，或者类似的代码。从而加剧了代码量的变多。
仔细观察这段代码：

<div className='grid grid-cols-2 gap-6'>
  <div className='rounded-2xl p-6 border border-gray-200 dark:border-gray-800 dark:bg-gray-900'>
    <BatteryCharging className='text-red-400 text-lg' />
    <div className='font-bold text-base mt-4'>...</div>
    <div className='mt-2'>...</div>
  </div>

  <div className='rounded-2xl p-6 border border-gray-200 dark:border-gray-800 dark:bg-gray-900'>
    <CloudDrizzle className='text-red-400 text-lg' />
    <div className='font-bold text-base mt-4'>...</div>
    <div className='mt-2'>...</div>
  </div>

  <div className='rounded-2xl p-6 border border-gray-200 dark:border-gray-800 dark:bg-gray-900'>
    <CloudLightning className='text-red-400 text-lg' />
    <div className='font-bold text-base mt-4'>...</div>
    <div className='mt-2'>...</div>
  </div>
</div>

这段代码已经是我简化之后的形态，但是依然有大量冗余的存在。由此还暴露出来一个问题，那就是这种写法的扩展性很差。例如，我想要在子项父级元素中修改一个样式，就贼难受。所以我可能还是要调整一下用 css 来写会更好一点

<div className='grid grid-cols-2 gap-6'>
  <div className='section'>
    <BatteryCharging className='text-red-400 text-lg' />
    <div className='font-bold text-base mt-4'>...</div>
    <div className='mt-2'>...</div>
  </div>

  <div className='section'>
    <CloudDrizzle className='text-red-400 text-lg' />
    <div className='font-bold text-base mt-4'>...</div>
    <div className='mt-2'>...</div>
  </div>

  <div className='section'>
    <CloudLightning className='text-red-400 text-lg' />
    <div className='font-bold text-base mt-4'>...</div>
    <div className='mt-2'>...</div>
  </div>
</div>
.section {
  @apply rounded-2xl p-6 border border-gray-200 dark:border-gray-800 dark:bg-gray-900
}

这样就清爽了许多。

四、不可控的 class，越写越多
大家注意看，这是我项目中的真实情况。刚开始我还认为自己是可以控制住 class 的复杂度的。可是，写多了之后，功能在一点点加，class 也越变越复杂。最后到了这种程度。

在代码维护时，这极大影响了 html 结构的阅读体验。并且，在这一侧，我使用过程中，我有一点眩晕的是，我有点拿不准，这个样式，是当前元素的，还是之前公用的，或者是他继承来的。

这种感觉用得越多，越眩晕。从而导致我经常无法像以前那样快速定位样式问题。

五、项目越大，css 文件也越大
在控制不好的情况下，我们总是很难真的始终在使用已经存在的样式。因此，随着项目写的页面越来越多，css 最终的打包体积也会越来越大。tailwindcss 会随着新的 class 名出现，而增加更多的代码。

六、总结
注意，千万要注意，我给大家分享 tailwindcss 的弊端，并没有任何建议大家放弃 tailwindcss 的意思。并不是说，放弃了这个方案，其他方案就没有痛点了。大多数时候这是一个取舍的问题。技术方案很难真的存在一个完美的银弹。并不是说，有缺点就非得放弃。我是希望大家能够更加理性的看待 tailwindcss。它在开发效率上确实带来了很大的好处，让我非常欣喜。但是他主要的问题集中在，容易失控，容易增加高额的维护成本。

因此，我目前的方式是，综合使用 tailwindcss 和 css 样式。这样能够更大程度上弱化我刚才说的这些问题。在使用过程中，度的把握可能是一个非常重要的事情。

参与了很多技术探讨，我觉得多角度看待一个技术方案的习惯，是许多开发者非常欠缺的。很容易对某一个技术方案狂热的喜欢或者极度的抵触。这很明显是一个不健康的心理状态。tailwindcss 我依然会持续的使用，只是使用方式可能会跟之前半年相比，发生一些变化，能够将其运用得更加合理，是我追求的状态。