轻度使用 TailwindCSS 后的一点看法

DebugMi 发布于 2021-09-06 19:19编辑于 2024-08-29 03:45阅读：

现在是2021年，TailwindCSS star 增长速度非常快，已经 50K 了，一个 css 框架可以在短时间内到达这样一个数量级，一定是有他的道理的

一年前看到文章有这个东西，当时想：这不就和内联 style 一样了吗？那我直接写内联不是更快？

一年后亲手用上这个东西，现在想：香

首先这玩意和传统的 css 框架不一样，他不是单纯的提供一堆工具类就完事了，他是有完整的工程系统的

原子类

基本上所有的 css 属性和值，在这里都有对应的原子；如果进一步封装类，还可以用原子类做组合，如下面的 @apply，等于说万物基于类，已经可以告别 css 原生属性，也可以告别「这个元素应该起什么名字的类」的烦恼

body{
  @apply text-blue-400 bg-white;
}

<nav className="flex-shrink-0 w-full border-b-2 border-blue-400 mb-5 hidden md:block bg-white"></nav>

这样说的话会不会提供的 css 类文件会非常大？因为覆盖了那么多场景。不会，他会按需 purge，比对 tsx 里用到的类，最后生成一份最小的 css 类文件，可以说非常满足生产中的需求了，大大的减少了样式代码量

但是有些很细的值没有覆盖到的怎么办？他还提供了 JIT 模式，可以根据所写的类生成对应的原子：

<div class="left-[44.3rem]">

响应式很简单

响应式工具类后面可以跟任何类，甚至可以跟自定义的类，可以说非常先进了，秒杀所有以前写响应式布局的体验，定制化程度也非常高

基本上就是一句话，解决以前十几行的响应式写法

/* 响应式中的自定义类 */
@variants responsive {
  .flex-grid {
    @apply flex flex-wrap;
  }
}

<div class="block md:flex-grid">
</div>

vscode 的支持

支持得很好，智能提示和预览都很完备

使用过程中的缺点

当然，缺点也是有的，比如类是不存在先后顺序优先级问题的，所以很难实现后来的类要覆盖之前的样式场景；这些目前来看还需要官方加一些修饰符才能解决了

TailwindCSS 大量用到 css 的变量特性，所以，想要兼容 IE 的，就可以告别了

结论

虽然用了 TailwindCSS 写代码的手速变快了，但是我觉得写 c 端很重设计的项目来说的话，他还是不如写 css 样式来的方便，特别是繁多的尺寸和动画场景

项目初期或设计不是很规范的团队一定是一个灾难，除非设计和开发一开始就约定好各个变量，后期的迭代将会非常舒服

以上是轻度使用后的感受，体验很不错，写样式方式大变革，之后会持续更新

0