当前位置：卡卷网 / 每日看点 / 正文

Tailwind, UnoCSS的意义是什么？为什么我不直接在行内写style标签？

作者：卡卷网发布时间：2024-12-09 14:14浏览数量：102次评论数量：0次

在博客上写过相关的文章, 简单贴一下:

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) 已经火了有一阵了, 当然你也可以说这是前端瞎折腾, 但这确实是写出「现代、好看、交互强的界面」的捷径.

END

免责声明：本文由卡卷网编辑并发布，但不代表本站的观点和立场，只提供分享给大家。

评论打赏