tailwindcss真的好用吗？

CSS/设计
511
0
0
2024-03-30
Tailwind CSS，值得2024年的你一试吗？
上一篇
现代 CSS 解决方案：文字颜色自动适配背景色！
下一篇
写在前面
今天写一篇关于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一样，你用我会推荐，你不用我也不会觉得你不思进取。
tailwindcss推荐指数

※※※ 三颗星

Tailwind CSS，值得2024年的你一试吗？
上一篇
现代 CSS 解决方案：文字颜色自动适配背景色！
下一篇