tailwindcss真的好用吗？

写在前面

今天写一篇关于tailwindcss 的文章，其实这个css技术已经出现很久了，在一些大型项目很多人也已经在用了，虽然不是说必须要会吧，但是没听说过肯定是不行的，他的操作逻辑应该是和unocss差不多，但是今天我们不写unocss，因为我也没咋看，没有具体的demo给到你们，今天我们就简单的写一个demo看一下tailwindcss的实现优势到底是什么，今天就实现一个非常简单的登录页面，大概效果如下：下面我们分别使用三种方式实现，原生css，预编译器scss，和 tailwindcss 最后我会说一下我对tailwindcss的一些看法

在这里插入图片描述

使用原生实现

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>Login</title>
</head>
<body id="root"><div class="container"><div class="c-top"><h2>TAILWINDCSS-前端.火鸡</h2></div><div class="c-bottom"><div class="c-input"><div class="c-icon"><img class="c-img" src="../assets/image/accout.png"></div><input class="c-inu" type="input" name=""></div><div class="c-input"><div class="c-icon"><img class="c-img" src="../assets/image/pwd.png"></div><input class="c-inu" type="password" name=""></div><button class="c-btn" type="button">立即登陆</button></div></div>
</body>
<style>
#root{height: 100svh;--tw-bg-opacity: 1;background-color: rgb(17 24 39 / var(--tw-bg-opacity));display: flex;justify-content: center;align-items: center;
}
.container{display: flex;flex-direction: column;width: 400px;
}
.c-top{height: 150px;background-color: #5386ec;box-sizing: border-box;display: flex;align-items: center;justify-content: center;color: #fff;border-radius: 10px 10px 0 0 ;    
}
.c-bottom{height: 300px;background-color: #fff;display: flex;flex-direction: column;align-items: center;justify-content: center;border-radius: 0 0 10px 10px;    
}
.c-input{width: 80%;margin: 20px 0;position: relative;display: flex;flex-direction: row;border-radius: 40px;}
.c-icon{width: 40px;height: 40px;background-color: #f3f3f3;border-radius: 10px 0 0 10px;padding: 10px;box-sizing: border-box;
}
.c-img{width: 100%;height: 100%;
}
.c-inu{width: calc(100% - 40px);outline: none;border:none;font-size: 20px;background-color: #f3f3f3;border-radius: 0 10px 10px 0;}
.c-btn{width: 80%;height: 40px;border-radius: 40px;border:none;font-size: 16px;color: #fff;background-color: #5386ec;
}</style></html>

效果

在这里插入图片描述

使用scss 实现

<template><div class="container"><div class="content"><div class="c-top"><h2>TAILWINDCSS-前端.火鸡</h2></div><div class="c-bottom"><div class="i-inu"><div class="c-icon"><img src="./assets/accout.png" /></div><input type="text" /></div><div class="i-inu"><div class="c-icon"><img src="./assets/pwd.png" /></div><input type="password" /></div><button class="c-btn">立即登陆</button></div></div></div>
</template><script setup>
</script><style lang="scss" scoped>$baseColor: #5386ec;$bgColor : #f3f3f3;$baseUnitPx : 40px;$whiteColor: #ffffff;.common-flex-center {display: flex;justify-content: center;align-items: center;}.common-flex-col {display: flex;flex-direction: column;}.common-flex-row {display: flex;flex-direction: row;}.container {background-color: #191d2d;height: 100vh;@extend .common-flex-center;.content {@extend .common-flex-col;.c-top {width: 400px;height: 150px;background-color: $baseColor;color: $whiteColor;@extend .common-flex-center;}.c-bottom {width: 400px;padding: 20px;box-sizing: border-box;background-color: $whiteColor;@extend .common-flex-col;align-items: center;.i-inu {@extend .common-flex-row;margin: 20px 0;width: 80%;justify-content: center;background-color: $bgColor;border-radius: 10px;.c-icon {width: $baseUnitPx;height: $baseUnitPx;padding: 10px;box-sizing: border-box;img {width: 100%;height: 100%;}}input {width: calc(100% - $baseUnitPx);outline: none;font-size: 20px;border: none;background-color: $bgColor;border-radius: 0 10px 10px 0;}}.c-btn {width: 80%;height: $baseUnitPx;border: none;background-color: $baseColor;font-size: 16px;color: $whiteColor;border-radius: $baseUnitPx;}}}}
</style>

效果

在这里插入图片描述

tailwindcss 实现

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Login</title></head><body><div class="flex h-screen w-full items-center justify-center bg-slate-900"><div class="w-400 flex flex-col"><div class="h-150 bg-custom-blue rounded-t-10 box-border flex items-center justify-center text-white"><h2 class="text-f-z-20">TAILWINDCSS-前端.火鸡</h2></div><div class="h-300 rounded-b-10 flex flex-col items-center justify-center bg-white"><div class="my-5 flex w-80 flex-row items-center"><div class="bg-f3 rounded-l-10 box-border flex h-40 w-40 items-center justify-center p-10"><img class="h-full w-full" src="https://img-blog.csdnimg.cn/direct/89ef557241ea4d719ec140882e5ed00e.png#pic_center" alt="" /></div><input style="width: calc(100% - 40px);" class="text-f-z-20 bg-f3 rounded-r-10 h-40 outline-none" type="text" placeholder="accout" /></div><div class="my-5 flex w-80 flex-row items-center"><div class="bg-f3 rounded-l-10 box-border flex h-40 w-40 items-center justify-center p-10"><img class="h-full w-full" src="https://img-blog.csdnimg.cn/direct/249b4c14085a4076aaff70ac32922e9c.png#pic_center" /></div><input style="width: calc(100% - 40px);" class="text-f-z-20 bg-f3 rounded-r-10 h-40 outline-none" type="password" placeholder="password" /></div><button class="bg-custom-blue text-f-z-16 rounded-40 my-5 h-40 w-80 border-none text-white">立即登陆</button></div></div></div></body>
</html>

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {theme: {extend: {width: {400: '400px',40: '40px',},height: {40: '40px',600: '600px',150: '150px',300: '300px',},colors: {'custom-blue': '#5386ec',},fontSize: {'f-z-16': '16px','f-z-20': '20px',},borderRadius: {40: '40px',10: '10px',},backgroundColor: {f3: '#f3f3f3',},padding: {10: '10px',},},},plugins: [],
}

效果：
在这里插入图片描述

注意：上面的demo仅仅作为案例使用，没有做任何注释，也没有做任何优化，直接平铺直叙的开发完，仅作参考

怎么看tailwindcss

tailwindcss其实改变了我们写css的习惯，本质就已经改变了，他提供了大量的简写形式给到我们，想快速的掌握这门css的技术，需要我们自己的css基本功，但是网上我也看了很多对tailwindcss的评价，褒贬不一，但是夸的还是相对多很多的，本质的原因是很多人是愿意做出改变的，无可厚非的一个点是他确实可以提升我们开发css的效率，（虽然我写上面的那个效果写了几个小时，我是一边看文档一边写），不过可以很明显的感觉到他帮助我们省了大量的重复性的代码，特别是多人开发的时候，

直观感受（以下仅为个人观点，因为本人没有使用tailwindcss进行过大项目使用，所以见解可能比较肤浅）

优点

代码复用性极高
一键更换主题
开发效率大幅度提升（熟练之后）
不用纠结起类名的问题
启动清除无用代码（网上说的，截止到发稿我没有进行相关实验）
…

缺点

样式不直观（都是类名，没有原始css代码）
调整不方便，耦合度较高（一些自定义的类样式，同时在用的时候，只能新加，无法修改）
代码维护性不高（你们可以看看上面我写的那些代码，给你们维护的话，你们心里是什么感觉）
学习成本稍高（除非天天用，否则就是背诵对应的简写形式，安装之后需要进行对应的配置，我个人使用的是在线开发工具）

写到最后

怎么说呢？当年vue刚出现的时候也是一样的很多人排斥，开发者就是这样，有人愿意做出改变，就有人不愿意改变自己的开发习惯，这个是没有什么问题的，但是总要有人前进，摸索，不然技术就会停滞不前，我对tailwindcss保持中立的态度，我会去尝试在项目中使用，但是你说你不愿意用，我也不会一直给你推荐，因为这个东西和vue还是有本质的区别，一个新的框架可以解决我们常规开发的痛点，比如操作dom的繁杂性高，页面渲染不及时，发布包无法很好的做更新配置等等，但是css的痛点在我看来scss，less这些预编译技术已经解决的八八九九了，只要你使用的足够熟练，你会发现scss是可以实现非常棒牛叉的效果的，而且复杂度其实并不高，另外就是tailwindcss在我看来就是一群有想法的人做出来的对css的简写，当然实现到目前的程度毋庸置疑，肯定是很难的，但是表象看确实如此,我看网上很多人疯狂安利这个技术，当然可能是我没有完全学透这门技术导致的，我对着东西的看法目前仅仅是停留在提升开发效率上，但是和我自己储存的css知识量来看，他反而有点拖慢我的进度，见仁见智吧，我会和推荐tsc一样，你用我会推荐，你不用我也不会觉得你不思进取。