使用 Tailwind CSS 可能会遇到的问题及新方案

10,932 阅读4分钟

TailwindCSS 是一种编译型的原子类 CSS库,关于原子类的优劣,TailwindCSS 作者的这篇文章阐述的很明白:

CSS Utility Classes and "Separation of Concerns

其实,大家若有实际工程经验,就非常赞同该文章中的观点。

使用了 Tailwind CSS,我们可以非常快速的编写 UI,并且非常简单的编写伪类和媒体查询,代码量是手写 CSS 的 1/5 至 1/10,可以说是非常好的提效。

总体来说 Tailwind CSS 非常棒,我非常推荐在新项目中使用,但是也存在以下几个问题,主要问题都集中在编译剔除方面:

注意以下问题虽然存在,但是也无法遮掩 Tailwind 带来的优势

  1. 原子类通病,无法确定原子类个数的边界,若设计不确定,可能被使用的原子类配合媒体查询、伪类的组合大概会有6mb的css体积,这点 Tailwind 推荐的是使用 PurgeCSS 等工具在发布前对代码进行正则匹配,剔除没有使用过的原子类,最后可以将 6MB 的 css 缩减到 20kb-50kb;
  2. 缺点2,无法确保生产环境和开发环境100%保持一致。由于 Purge 剔除 css 是有不少开销的,现在大家习惯边开发边预览,所以一般的做法是开发过程用完整的 css,发布时进行编译剔除css,若项目中用到了变量修改 css 就无法匹配上,导致生产和开发环境不一致,不检查还可能不能发现;
  3. 缺点3,不方便使用定制外的值,比如说设计师要求这个按钮向右偏移3像素,这时候就还是需要脱离 Tailwind 预设的原子类,单独编写 css。这违背了Tailwind CSS 的官方标语:不需要离开HTML,即可开发现代Web应用;
  4. 缺点4,HTML 代码中有成片原子类,解决的方法是使用 @apply 创建一个自定义的原子类组合,然后重新编译。开发过程中若频繁重新编译,挺降低效率的,原子类的目的就是提高开发效率。官方另一个解决方案是尽可能使用 React、Vue 等现代框架的组件,但是这也很容易催生一大批只有1个样式、1个标签的组件。比起直接定义 css 的效率还低;
  5. 缺点5,无法使用 css 选择器功能,如子代选择器、后代选择器、兄弟选择器;缺失了这类功能,意味着每个元素都需要编写 class;
  6. 缺点6,TailwindCSS 其实也有CSS污染问题的,这导致于Tailwind CSS 不适合做公共组件库的开发,更适合业务开发;举例公共组件中若设计了 m-2 为1rem,但是业务代码中也使用 Tailwind CSS,并且设计为 m-2 为1.5rem,那么m-2就被遇到了 css 污染的问题。
  7. 缺点7,需要记住成百上千的关键词;Tailwind CSS 有非常多的新单词,并且脱离了 css 样式表原有的词汇,每个词汇还有不同阶层的值,组合起来成百上千个新关键词。官方的解决方案是提供了 VSCode、WebStorm 等插件
  8. 缺点8,Tailwind 一直在更新,原子类的名称还会有调整,让你时刻需要更新自己的单词表,如 2.0 的改动:

image.png

上面讲了这么缺点,虽然我内心感到很无耻(因为后续要开始推销自己的解决方案),但是它们的确是存在的,这也是我为什么需要编写 Flavor CSS 的原因:

访问:flavor css 运行时原子类

Flavor CSS 是我在用 Tailwind CSS 遇到的以上8类问题,但是非常喜欢 Tailwind CSS 的开发体验,从而设计的 运行时 的原子类库,具体可以了解一下此库,看看是如何解决以上问题的。