前言

随着前端的发展，对前端页面的要求越来越高，而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实现该需求。

js 复制代码

<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是在书流氓吗？

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

Vue里使用Tailwind CSS，这不是耍流氓吗

前言

正文

结尾