tailwindcss真的好用吗?

CSS/设计
98
0
0
2024-03-30
写在前面
今天写一篇关于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推荐指数

※※※ 三颗星