Tailwind, UnoCSS的意义是什么？为什么我不直接在行内写style标签？
在博客上写过相关的文章, 简单贴一下:
tailwind 一直饱受非议, 其中说的最多的大概就是「我为什么不直接写内联样式?」. 其实 tailwind 不仅是简写了样式名这么简单, 它是一系列便利的封装.
动画
举个简单的例子, animate-spin 属性用于添加旋转动画, 常用在 loading 中. 如果你用传统的 css/sass 编写, 那你至少需要这么多的代码.
animation: spin 1s linear infinite;
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
交互
如果你希望一个 button 在鼠标炫富时颜色变浅, 在 tailwind 中只需要简单的hover:opacity-90, 传统的 css 则需要:
.btn:hover {
background-color: rga(xxx,xxx,xxx, 0.9)
}
响应式设计
同时现代很多网页需要同时满足大屏设备和移动小屏设备的适配, 一般我们会用 css3 的 @media 来根据窗口尺寸编写不同的 css.
@media (max-width: 768px) {
body {
width: 80%
}
}
在 tailwind 上, 适配 768px 宽度的设备, 你只要在样式前加入 md 前缀即可.
<body class="md:w-4/5">
利好无设计开发
个人或者小团队开发产品, 没有专业的设计师出图, 写组件相当痛苦. 例如 box-shadow 属性, button、card、modal, 每个都需要不一样的 shadow 样式. 在自己编写的时候经常要重复修改多次来达到一个比较好的效果, twc 提供了 7 个不同规格的选项, 都是泛用性非常高的选择. 现在你要写一个现代化外观的按钮只需要class="shadow-md rounded-lg"就行了.
新的组件模式
tailwind 还有个衍生品, Headless UI. 将组件的功能和样式彻底分离. 很多时候组件的功能是相同的 , 但是需要不同的样式, 有时候样子一样的组件却需要完全不同的 api. Headless 就是为了解决这个问题.
NuxtLab UI 就是一个无头tailwind组件库, 闲得蛋疼可以看看, 代码很干净.
class 也太特么长了
这是一个由 tailwind 编写的 checkbox, 做了动效和深色适配.
<input type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"/>
看到这个长度是不是蚌埠住了. 没关系 tailwind 有@layer和@apply, 你可以像组织传统 css 一样去组织 tailwind, 封装自己的样式组件.
@layer components {
.checkbox {
@apply
w-4
h-4
text-blue-600
bg-gray-100
border-gray-300
rounded
focus:ring-blue-500
dark:focus:ring-blue-600
dark:ring-offset-gray-800
focus:ring-2
dark:bg-gray-700
dark:border-gray-600
}
}
过长的样式导致的问题是无法避免的, 即便你直接写内联也是一样, 最终一定会回到封装样式组件的路上. 但之前所有的好处(抽象、减少代码量、响应式...)都还在.
这也是一种「不过早抽象」的价值. 一个小的 idea, 你可以一把梭抢先实现原型, 后期再抽离维护, tailwind 降低了这一操作的难度.
当然, 这种种好处的前提是, 要么你写风格多样化的 C 端界面, 要么需要创建属于自己团队的组件库. 然而很明显, 大多数公司还停留在element antd一把梭的阶段. 这当然不是 tailwind 的问题.
其实海外3T架构(Next tRPC Tailwind)已经火了有一阵了, 当然你也可以说这是前端瞎折腾, 但这确实是写出「现代、好看、交互强的界面」的捷径.
