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一样，你用我会推荐，你不用我也不会觉得你不思进取。

tailwindcss推荐指数

※※※ 三颗星

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/311914.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【UE Niagara学习笔记】07 - 火焰的热变形效果

【UE Niagara学习笔记】07 - 火焰的热变形效果

目录 效果 步骤 一、创建热变形材质 二、添加新的发射器 2.1 设置粒子材质 2.2 设置粒子初始大小 2.3 设置粒子持续生成 三、修改材质 四、设置粒子效果 在上一篇博客&#xff08;【UE Niagara学习笔记】06 - 制作火焰喷射过程中飞舞的火星&#xff09;的基础上继续…
阅读更多...
[力扣 Hot100]Day2 字母异位词分组

[力扣 Hot100]Day2 字母异位词分组

题目描述 给你一个字符串数组&#xff0c;请你将 字母异位词 组合在一起。可以按任意顺序返回结果列表。 字母异位词 是由重新排列源单词的所有字母得到的一个新单词。 出处 思路 这题有点考阅读理解&#xff0c;意思就是把输入数组中的所含字母相同但顺序不同的单词放到同…
阅读更多...
主动学习基础-贝叶斯神经网络

主动学习基础-贝叶斯神经网络

引言 传统的深度神经网络一般都有过度自信的问题。 即使我给神经网络提供一个从来没有训练过的类别图像&#xff0c;神经网络也会输出一个类别。比如训练猫狗的分类器&#xff0c;如果你抛出一个人的图像&#xff0c;网络也会将其分类为猫或者狗。 在几乎所有现实世界的问题中…
阅读更多...
Netty通信中的粘包半包问题(一)

Netty通信中的粘包半包问题(一)

前言 我们在日常开发过程中&#xff0c;客户端和服务端的连接大多使用的是TCP协议,因为我们要保证数据的可靠传输&#xff0c; 当网络中出现丢包时要求&#xff0c;要求数据包的发送端重传给接收端。而TCP是一种面向连接的传输层协议&#xff0c; 当使用TCP进行传输时&#xf…
阅读更多...
YOLOv5改进有效涨点目录 | 包含卷积、主干、检测头、注意力机制、Neck上百种创新机制

YOLOv5改进有效涨点目录 | 包含卷积、主干、检测头、注意力机制、Neck上百种创新机制

⭐ YOLOv5改进有效系列目录 ⭐ 前言 Hello&#xff0c;各位读者们好 本专栏自开设一个月以来已经更新改进教程70余篇其中包含C2f、主干、检测头、注意力机制、Neck多种结构上创新&#xff0c;也有损失函数和一些细节点上的创新。同时本人一些讲解视频和包含我所有创新的YOLO…
阅读更多...
2023年全国职业院校技能大赛（高职组）“云计算应用”赛项赛卷⑥

2023年全国职业院校技能大赛（高职组）“云计算应用”赛项赛卷⑥

2023年全国职业院校技能大赛&#xff08;高职组&#xff09; “云计算应用”赛项赛卷6 目录 需要竞赛软件包环境以及备赛资源可私信博主&#xff01;&#xff01;&#xff01; 2023年全国职业院校技能大赛&#xff08;高职组&#xff09; “云计算应用”赛项赛卷6 模块一…
阅读更多...
MySQL：DML数据操作语言（添加，删除，修改），DDL数据查询语言（条件查询，分组查询，排序查询，分页查询）

MySQL：DML数据操作语言（添加，删除，修改），DDL数据查询语言（条件查询，分组查询，排序查询，分页查询）

目录 1.DML&#xff08;数据操作语言&#xff09;1.添加数据2.修改数据3.删除数据 2.DQL(数据查询语言)1.DQL-语法2.基本查询3.条件查询(WHERE)1.语法&#xff1a;2.条件&#xff1a;3.案例: 4.聚合函数1.介绍2.常见聚合函数3.语法4.案例 5.分组查询&#xff08;GROUP BY&#…
阅读更多...
Proteus仿真stm32f103r6输出PWM/正弦波

Proteus仿真stm32f103r6输出PWM/正弦波

资料下载地址&#xff1a;Proteus仿真stm32f103r6输出PWM/正弦波 一、仿真图 Proteus仿真stm32f103r6输出PWM/正弦波 二、程序 #include "pbdata.h"u16 fre; void RCC_Configuration(void); void GPIO_Configuration(void); void TIM3_Configuration();void Dela…
阅读更多...
SpringBoot项目docker镜像生成

SpringBoot项目docker镜像生成

1. 本文思路 拉取基础镜像基于镜像创建容器在容器中&#xff0c;安装所需依赖部署脚本提交容器&#xff0c;生成新的镜像编写Dockerfile&#xff0c;添加启动命令&#xff0c;生成最终镜像导出镜像 2. 操作步骤 2.1 基础环境 # 拉取镜像 docker pull centos:7.6.1810 # 运行…
阅读更多...
C++ n皇后问题 || 深度优先搜索模版题

C++ n皇后问题 || 深度优先搜索模版题

n− 皇后问题是指将 n 个皇后放在 nn 的国际象棋棋盘上&#xff0c;使得皇后不能相互攻击到&#xff0c;即任意两个皇后都不能处于同一行、同一列或同一斜线上。 现在给定整数 n &#xff0c;请你输出所有的满足条件的棋子摆法。 输入格式 共一行&#xff0c;包含整数 n 。 …
阅读更多...
迅为RK3568开发板Android11/12/Linux编译驱动到内核

迅为RK3568开发板Android11/12/Linux编译驱动到内核

在平时的驱动开发中&#xff0c;经常需要在内核中配置某种功能&#xff0c;为了方便大家开发和学习&#xff0c;本小 节讲解如何在内核中添加驱动。具体的讲解原理讲解请参考本手册的驱动教程。 Android11 源码如果想要修改内核&#xff0c;可以运行以下命令进行修改: cd ke…
阅读更多...
机器学习_8、支持向量机

机器学习_8、支持向量机

支持向量机解决鸢尾花数据集分类问题 # 导入鸢尾花数据集 from sklearn.datasets import load_iris import pandas as pd import numpy as npiris_data load_iris() Xiris_data.data yiris_data.target# 划分训练集与测试集 from sklearn.model_selection import train_test_…
阅读更多...
【PaperReading- VLM】1. FERRET

【PaperReading- VLM】1. FERRET

CategoryContent论文题目FERRET: REFER AND GROUND ANYTHING ANYWHERE AT ANY GRANULARITY作者Haoxuan You (Columbia University), Haotian Zhang, Zhe Gan, Xianzhi Du, Bowen Zhang, Zirui Wang, Liangliang Cao (Apple AI/ML), Shih-Fu Chang (Columbia University), Yinfe…
阅读更多...
【java】Error:java: 无效的源发行版: 12，只需三步

【java】Error:java: 无效的源发行版: 12，只需三步

运行项目报错 “Error:java: 无效的源发行版: 12” 先在file下的project Structure 下选择 Project 将 Project language level 选择版本 8 对应的。 然后点击右下角的Apply OK 再在file下的project Structure 下选择Moudels ,将该项目的Sources改为8. 然后点击右下角的Apply…
阅读更多...
Logstash应用介绍

Logstash应用介绍

1.Logstash介绍 1.1 前世今生 Logstash 项目诞生于 2009 年 8 月 2 日。其作者是世界著名的运维工程师乔丹西塞(JordanSissel)&#xff0c;乔丹西塞当时是著名虚拟主机托管商 DreamHost 的员工。 Logstash 动手很早&#xff0c;对比一下&#xff0c;scribed 诞生于 2008 年&am…
阅读更多...
zabbix监控部署

zabbix监控部署

目录 一、什么是zabbix&#xff1f; 二、zabbix监控原理 三、zabbix常见的五个程序 四、zabbix监控mysql实验 1、部署服务端 2、部署客户端 3、自定义监控内容 一、什么是zabbix&#xff1f; zabbix 是一个基于 Web 界面的提供分布式系统监视以及网络监视功能的企业级的…
阅读更多...
Java应用实践课程设计——背诵单词助手

Java应用实践课程设计——背诵单词助手

项目描述 该项目实现了一个简单的单词背诵小助手系统&#xff0c;包括管理员模块和用户模块。管理员可以对CET4表进行增加、删除、修改和查询等操作&#xff1b;用户可背诵CET4表中的单词&#xff0c;回顾已掌握和未掌握的单词。 数据库设计——words.sql
阅读更多...
JVM加载class文件的原理机制

JVM加载class文件的原理机制

1、JVM 简介 JVM 是我们Javaer 的最基本功底了&#xff0c;刚开始学Java 的时候&#xff0c;一般都是从“Hello World ”开始的&#xff0c;然后会写个复杂点class &#xff0c;然后再找一些开源框架&#xff0c;比如Spring &#xff0c;Hibernate 等等&#xff0c;再然后就开发…
阅读更多...
物联网通讯协议NB-lot和LoRa差异分析

物联网通讯协议NB-lot和LoRa差异分析

像把大象装冰箱一样&#xff0c;物联网&#xff0c;万物互联也是要分步骤的。 一、感知层(信息获取层)&#xff0c;即利用各种传感器等设备随时随地获取物体的信息; 二、网络层(信息传输层)&#xff0c;通过各种电信网络与互联网的融合&#xff0c;将物体的信息实时准确地传递…
阅读更多...
大数据 - Doris系列《三》- 数据表设计之表的基本概念

大数据 - Doris系列《三》- 数据表设计之表的基本概念

目录 &#x1f436;3.1 字段类型 &#x1f436;3.2 表的基本概念 3.2.1 Row & Column 3.2.2 分区与分桶 &#x1f959;3.2.2.1 Partition 1. Range 分区 2. List 分区 进阶&#xff1a;复合分区与单分区的选择 3.2.3 PROPERTIES &#x1f959;3.2.3.1 分片副本数 &#x1f…
阅读更多...
最新文章

Copyright @ 2022~2023