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

最新推荐文章于 2024-07-11 15:15:03 发布

某个爱摸鱼的程序员

最新推荐文章于 2024-07-11 15:15:03 发布

阅读量411

点赞数

文章标签： vue.js css 前端

本文链接：https://blog.csdn.net/2301_79347496/article/details/134143321

版权

前言

随着前端的发展，对前端页面的要求越来越高，而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动态的对元素进行调整改变。