在Vue中运用Tailwind CSS,这真的可行吗?

发表时间: 2023-12-11 11:32

前言

随着前端的发展,对前端页面的要求越来越高,而css的功能也越来越强大,但对于写css样式来说却是非常头疼的的事。因为前端页面的动画要求以及页面布局的精细管控,需要写大量的css。为了解决写css难得问题,目前已经出来了许多css得解决方案,如Tailwind CSS,CSS in JS,sass,less等。

随着Tailwind CSS的热度越来越高,使用Tailwind CSS的项目也是越来越多,但是真没必要为了使用而使用。当前流行的流行的前端框架里,React框架对CSS的处理,官方也没有给出特别好的解决,每个人写样式用到的解决方案也不同,Vue框架本身有着很好的CSS处理,在每一个Vue文件里写的样式,都可以是唯一的。

正文

这里只针对Vue里使用Tailwind CSS来说明,因为React里写CSS确实没有太统一又简便的解决方案,想用什么都可以。

首先说Tailwind CSS确实是个好东西,没有必要质疑大佬写出来的东西(我是菜鸡),每一个类名代表一个样式,这样就不会产生样式覆盖以及权重不够的问题,并且当项目足够大时,所构建的css包也是非常小的,同时在生产环境中还会自动删除没有使用到的CSS代码。

就是这样的Tailwind CSS我为什么不推荐在Vue里面使用呢。主要因为Vue中写样式很容易,上面写好模板语法,定义好class,紧接着就可以在下面写样式,每一个组件内,Vue的样式都是独立的,也就是说大多情况下在Vue里基本不会产生样式覆盖的问题。

写框架一定会有组件化思想,为了更好的模板复用。既然Tailwind CSS是为了复用样式的,组件也同时是复用样式和模板的,那为什么不在Vue中将组件拆分的更细一些呢?

个人写项目的时候,会把项目中的button也进行二次封装一遍,当使用时,就只是用自己二次封装的组件,但凡设计图有一些稍许的改变,就只需要改一个组件就可以全局改变这个button组件,也省去了很大的麻烦。 当然这个事Tailwind CSS也可以实现,但是改完这个原子样式,会影响到所有使用这个原子样式的内容,可能会产生一些不必要的麻烦。但是改组件内的样式只会修改这个组件,一定不会影响到其他内容。

现在大多情况下都会使用到组件库进行开发,当组件库里的组件样式不满足我们的需求的时候,我们需要进行样式穿透进行更改组件库组件的样式。这个是Tailwind CSS做不到,还是需要重新在style标签里写一些样式穿透的样式来改变组件。

如果有一些需求,可能是需要我们点击一个按钮,需要改变一个元素的宽度或者高度,在Vue中本身就很好实现,但是如果拿Tailwind CSS并不能直接实现。还是需要借助Vue里的动态class才能完成,下面是直接使用Vue实现该需求。

<template><button @click="setWidth">改变元素宽度</button><div class="box"></div></template><script setup lang="ts">//定义两个变量 控制宽高度和显示出现const boxWidth = ref("500px");const flag = ref(true);const setWidth = () => {//判断一下是否显示隐藏 然后给变量赋值宽高度flag.value ? (boxWidth.value = "0px") : (boxWidth.value = "500px");flag.value = !flag.value;};</script><style scoped lang="scss">.box {/*这里使用v-bind绑定boxWidth,动态设置宽高度*/height: v-bind(boxWidth);width: v-bind(boxWidth);border: 1px solid #000;border-radius: 10px;background: radial-gradient(circle, #fff, #000);transition: all 0.5s;}</style>

这里就可以动态改变元素的样式了,大多情况下,在Vue里都可以使用v-bind动态的对元素进行调整改变。

其实这样看来,模板中还是挺干净整洁的,但是如果完全使用Tailwind CSS来写样式的话。将是以下这种恐怖的画面(官方提供的示例)

这种还只是写样式,就在模板中写这么一大堆了(这里也许是html文件内的,没有特别标注,但是Vue模板中写应该也差不多),还不包括元素本身的属性,事件函数(prop)等都需要写在模板上的参数。如果在一些比较复杂的项目中,也许最后的模板会非常庞大,极不易维护。

另外再说一下Tailwind CSS的下载量,我们在npm上可以看到Tailwind CSS周下载量在600多万左右

肯定会有人质疑既然Tailwind CSS看上面的效果没有太优秀,但下载量还有这么高,难道这么多程序员都不会选择吗?另外看一个数据,就是next.js的下载量。

看着也不少吧,为什么要看next的下载量,它不仅支持Tailwind CSS,还因为当创建一个新的next项目的时候,会默认选中要下载Tailwind CSS的选项。

不说一定百分百都会有人选中吧,百分之五十会有的吧。那样默认选中下载Tailwind CSS的也有一半,这样周下载量提供的人数就已经有200万。那就再看一下react的周总下载量。

react的周总下载量在1800万左右,如果将Tailwind CSS的下载量,放到这里来看其实也并不算很多。

这里说了这么多数据只是说Tailwind CSS使用在react里可能解决的问题比较多,但是放眼整个react来说生态中也不是很明显的。在Vue里使用Tailwind CSS其实会显得很累赘,并不是很好的选择。

结尾

你认为在Vue里使用Tailwind CSS是在书流氓吗?

写的可能有些乱,感觉没抓住重点,非常抱歉,写的时候脑子有点乱。不足的地方不要吝惜的批评就好了


作者:iceCode
链接:
https://juejin.cn/post/7295673054231052324