原子化 CSS 真能减少体积么？

前言

最近看到这样一篇文章：《要喷也得先做做功课吧？驳Tailwind不好论》

个人觉得说的还是有一定道理的，就是该作者的语气态度可能稍微冲了点：

不过他说的确实有道理，如果这种原子化工具真的如评论区里那帮人说的那么不堪的话，又怎么会达到百万级的周下载量？而且还呈现出一路增长的态势，当然有人可能会说：哪一路增长了？你看那条曲线，在最右边都掉的不行了，肯定是马上要 G 了。

其实这些周下载量会在某几周呈现出极速下降的趋势一般都不是因为这玩意要没落了，哪有没落的这么快的，一两周用户量就少一半？出现这种情况的原因是因为欧美那边放假了，比方说复活节、圣诞节什么的，大家都出去玩了没人工作了所以才呈现出大幅下降的趋势。当然也不仅仅是欧美，某东方神秘大国放长假时也会呈现出类似效果。这个作者截图的时候可能刚好是欧美有什么假期，不信的话我们现在再来截一遍图看看：

卧槽！他截的是 tailwindcss 的下载量么？怎么我截的时候是五百多万的下载量？差的也太多了点，不过五百多万的下载量更证明了这个工具有多受欢迎，为了有个对比我们再来截一下 Vue 的数据：

可以看到 Vue 的下载量也不过三百来万，所以你是信评论区下面的那些小卡了米说这玩意有多垃圾多不好维护？还是信全球开发者闭着眼投票出来的用户数据？

体验

作为一名已经使用了多年的用户，我可以先跟大家分享一下自己的体验，以及用了这么久的优缺点，是否像评论区说的那么不好用，以及又是否像那些粉丝说的那么好。

首先说一下当初为什么要选择 Tailwind CSS，原因其实很简单：求新！

当时刚来这家公司不久，可能也就三四个月？但我作为一个新人却接到了一个重任：低代码平台！这个低代码是给公司运营同事用的，他们经常会出一些活动页面，这些页面技术含量并不高，交互也比较简单，主要是大量的图片以及一些表格表单等。但架不住页面多啊，总让我们做这些页面非常浪费人力，所以领导就想做一个低代码平台来分担我们的压力，他们运营想要什么页面自己搭建就好了，而我们只根据他们的需求来定制一个专属的低代码平台。

虽然不知道为什么这个重担会委派给我这个新人，但我还是非常开心的（感谢我阳总）因为这个项目只在公司内部使用，所以可以不用考虑那么些个兼容性什么的，我可以放心大胆的使用最新鲜的技术，终于不用再兼容那些个破浏览器啦！

而且这个项目还给了我很大的自由度，那时候 Vite 2.0 才刚发布不久，都没多少人用。甚至 Vue 3 都还算得上是比较新鲜的技术，至少在市面上用 Vue 3 开发的项目还不是很常见。但我当时想的是既然是一个船新项目那就不要留下什么技术债了，虽然当年我选的技术不是很成熟，但随着时间的推移慢慢的他们都会变成熟的嘛！如果现在就束手束脚的还用什么 vue-cli + vue2，随着时间的推移这个项目又跟公司现在维护的老项目没什么区别了。

当然有人可能会问：你怎么知道 Vite 这些新技术会越来越趋向成熟？万一发展一半像 Snowpack 一样噶了呢？我当然不知道某项技术未来的发展趋势，但当时的我就是有一种迷之自信，就是坚信尤雨溪出品的项目一定会有所发展，结果现在 Vite 发展的确实不错，尤大出品，必属精品。

一开始用的是 Vue3 + TSX，那时候是 3.0，还没有 setup 语法糖，每个变量还需要在底部 return 出去很麻烦，但用了 JSX 就不用挨个 return 了，而且 JSX 的灵活性也能让我很方便的使出一些骚操作。

但 JSX 和 CSS 的结合不像 .vue 文件那么方便，而且 Vue 也不像 React 似的有那么多 CSS-in-JS 的库，不过好在 Vite 原生支持 CSS Module，于是采纳了 TSX + CSS Module 的方案，感觉也挺好用的。

然而某一天我突然刷到了一篇 Tailwind CSS 的文章，其实以前也刷到过，但对这玩意的印象也就一般。不过今时不同往日，一方面是新项目我想把以前没用过的东西都用一遍（前提是 Star 数很高以及 npm 下载量还可以）另一方面感觉这个技术有点击中我的痛点，一方面是 TSX + CSS Module 确实没有 .vue 文件来的方便，毕竟要写两个文件，那有人可能会说你可以写成这样：

<script lang="tsx">
  ...
script>

<style scoped>
  ...
style>

当年真的没有这种语法，这是 3.2 才加上去的，当时只有 3.0 这个版本可以选，而且我也不知道后来他能搞这么多语法糖进去，我还以为一直都会写成这样呢：

<template>
  ...
template>

<script lang="ts">
export default {
  setup () {
    ...
    return {
      a,
      b,
      c,
      d,
      e,
      f,
      g,
      ...
    }
  }
}
script>

但 Tailwind 的出现让我觉得可以不用再写成两个文件了，一个.tsx文件就搞定了。并且另一个痛点就是起名，比方说某个元素可能仅仅只需要往下稍微移一点，只需要设置一个 margin-top 就行，但你还需要给它起个类名，有时我就直接起名 mt，当然这个类名还遭到了批评，让我不要这么写，所以后来我就干脆直接在标签上写个 style：

<div style="margin-top: 2px">
  ...
div>

你说这不就和 Tailwind 有点类似了么？我看评论区好多喷 Tailwind 的都说当样式多了以后可能会写出这样的代码难以维护：

<div class="relative p-3 col-start-1 row-start-1 flex flex-col-reverse rounded-lg bg-gradient-to-t from-black/75 via-black/0 sm:bg-none sm:row-start-2 sm:p-0 lg:row-start-1">
  <h1 class="mt-1 text-lg font-semibold text-white sm:text-slate-900 md:text-2xl dark:sm:text-white">Beach House in Collingwoodh1>
  <p class="text-sm leading-4 font-medium text-white sm:text-slate-500 dark:sm:text-slate-400">Entire housep>
div>

说实话写成这样确实有点恶心，看起来也不是很容易，但别忘了 Tailwind 并不会影响你原有的写法，如果真的有比较复杂的样式你就写在 css 文件里或者写在 .vue 的