轻度使用 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