当前位置: 首页 > news >正文

Windi CSS和Tailwind CSS以及UnoCSS

最近合作在写一个vue3+ts的项目,看到其他人用了一种写法,我觉得很奇怪,之前没见过,他是这样写的

 <div class="news flex-1 h-40px flex"></div>

我不理解的是为什么这样写就会让这个div的高度就是40px,好多代码都是这样,我去css里边搜索发现并没有额外设置什么,带着好奇我就搜了一下,原来是Windi CSS的用法。

介绍

通过扫描HTML和CSS并按需生成实用程序,Windi CSS能够在开发中提供更快的加载时间和快速的HMR,并且不需要再生产中进行清除。
Windi CSS支持Tailwind CSS的所有实用程序,无需任何额外配置。
UnoCSS是一个具有高性能且极具灵活的即时原子化CSS引擎,具有按需加载的特性。原子化CSS是一种CSS的架构方式,它倾向于小巧且用途单一的class,并且会以视觉效果进行命名。

对比

Windi CSS相比于Tailwind CSS具有按需加载,零依赖等特性。在CSS文件打包的大小与加载速度上有很大的提升。

基本用法

import 'virtual:windi.css'
<div class="space-y-0.5"><p class="text-lg text-black font-semibold">Erin Lindford</p><p class="text-gray-500 font-medium">Product Engineer</p></div>

原子化CSS的优势

1.提高开发效率 利用原子化框架提供的预设原子类,在少量样式编写上可以极大的提高开发效率,不需要单独定义在样式文件中;
2.免去起名烦恼 我们经常会因为起名而烦恼,之前也尝试过各种css命名方法,包括BEM,然而当html层级嵌套比较深的情况下,BEM命名法也会有起名难,不直观的缺陷
3.避免样式堆积 可以很好的避免你是样式的堆积,不存在你是样式类的不敢删除问题,有效的减少CSS的体积
4.样式隔离 天然的支持组件间的样式隔离,没有自定义的css也就无需担心组件之间样式的影响。

默认单位

默认单位是rem, 1rem = 16px;

相关文章:

Windi CSS和Tailwind CSS以及UnoCSS

最近合作在写一个vue3ts的项目&#xff0c;看到其他人用了一种写法&#xff0c;我觉得很奇怪&#xff0c;之前没见过&#xff0c;他是这样写的 <div class"news flex-1 h-40px flex"></div>我不理解的是为什么这样写就会让这个div的高度就是40px,好多代码…...

c++ opencv将彩色图像按连通域区分

要将彩色图像按连通域区分&#xff0c;您可以使用 OpenCV 中的 cv::connectedComponents 函数。 下面是一个简单的示例代码&#xff0c;说明如何使用 cv::connectedComponents 函数来检测并标记图像中的连通域&#xff1a; #include <opencv2/opencv.hpp> #include <…...

〖程序员的自我修养 - 认知剖析篇⑩〗- 学习编程的高效率方法

人之所以会觉得迷茫,本质上是欠缺对自己的一个控制力、识别庞杂信息、去伪存真的独立思考与认知能力。 说明:该文属于 程序员的自我修养 专栏,购买任意白宝书体系化专栏可加入易编程社区,早鸟价订阅模式除外。福利:加入社区的小伙伴们,除了可以获取博主所有付费专栏的阅读…...

前端基础1——HTML标记语言

文章目录 一、基本了解二、HTML常用标签2.1 文本格式化标签2.2 列表标签2.3 超链接标签2.4 图片标签2.5 表格标签2.6 表单标签2.6.1 提交表单2.6.2 下拉表单2.6.3 按钮标签 2.7 布局标签 一、基本了解 网页组成&#xff08;index.html页面&#xff09;&#xff1a; HTML标记语言…...

2.1: Dubbo的基本应用-负载均衡,集群容错,服务降级

负载均衡 官网地址&#xff1a; http://dubbo.apache.org/zh/docs/v2.7/user/examples/loadbalance/ 如果在消费端和服务端都配置了负载均衡策略&#xff0c; 以消费端为准。 这其中比较难理解的就是最少活跃调用数是如何进行统计的&#xff1f; 讲道理&#xff0c; 最少活跃数…...

正则常见问题及解决方案

使用正则处理问题的基本思路。有一些方法比较固定&#xff0c;比如将问题分解成多个小问题&#xff0c;每个小问题见招拆招&#xff1a;某个位置上可能有多个字符的话&#xff0c;就⽤字符组。某个位置上有多个字符串的话&#xff0c;就⽤多选结构。出现的次数不确定的话&#…...

docker发布项目及使用外部文件的情况处理

适用docker环境已搭建好 首先项目打jar包&#xff1a;server-cdzh-2.1.0-SNAPSHOT.jar 创建Dockerfile FROM java:8 ADD server-cdzh-2.1.0-SNAPSHOT.jar cdzh.jar EXPOSE 60156 ENTRYPOINT ["java","-jar","/cdzh.jar"] 在linux服务器新建…...

CSS 中哪些属性可以继承

1. 字体属性&#xff1a; font、font-style、font-variant、font-weight、font-size、line-height等属性是字体样式的属性&#xff0c;都可以被子元素继承。 2. 文本属性&#xff1a; color、text-indent、text-align、text-decoration、text-transform、letter-spacing、wo…...

vue cli构建的项目出现 Uncaught runtime errors

使用 vue/cli 脚手架构建的项目&#xff0c;在 npm run dev 运行后&#xff0c;页面出现 Uncaught runtime errors 报错遮罩层&#xff0c;如下图所示。 报错原因 这种错误通常是运行时出的问题&#xff0c;可能是网络错误&#xff0c;可能是变量未定义等等。 这种错误默认在开…...

透过源码理解Flutter InheritedWidget

InheritedWidget的核心是保存值和保存使用这个值的widget&#xff0c;通过对比值的变化&#xff0c;来决定是否要通知那些使用了这个值的widget更新自身。 1 updateShouldNotify和notifyClients InheritedWidget通过updateShouldNotify函数控制依赖其的子组件是否在Inherited…...

天去面试的时候,遇到一个问题。我三个任务,ABC,我怎么让A执行完执行B,B执行完执行C 3个并行线程,如何解决。程池的核心运行原理和参数。

今天去面试的时候&#xff0c;遇到一个问题。我三个任务&#xff0c;ABC&#xff0c;我怎么让A执行完执行B&#xff0c;B执行完执行C 3个并行线程&#xff0c;如何解决。程池的核心运行原理和参数。 1.线程池核心的参数 1.线程核心数- 线程池中始终保持的活动线程数量。 2.最…...

使用finksql方式将mysql数据同步到kafka中,每次只能同步一张表

使用finksql方式将mysql数据同步到kafka中&#xff0c;每次只能同步一张表 package flink;import org.apache.flink.streaming.api.environment.StreamExecutionEnvironment; import org.apache.flink.table.api.TableResult; import org.apache.flink.table.api.bridge.java.…...

ios开发 swift5 苹果系统自带的图标 SF Symbols

文章目录 1.官网app的下载和使用2.使用代码 1.官网app的下载和使用 苹果官网网址&#xff1a;SF Symbols 通过上面的网址可以下载dmg, 安装到自己的mac上 貌似下面这样不能展示出动画&#xff0c;还是要使用动画的代码 .bounce.up.byLayer2.使用代码 UIKit UIImage(system…...

Linux内核源码分析 (3)调度器的实现

Linux内核源码分析 (3)调度器的实现 文章目录 Linux内核源码分析 (3)调度器的实现一、概述二、调度器数据结构1、task_struct中与调度有关的的成员2、调度器类3、就绪队列4、调度实体 三、处理优先级1、优先级的内核表示2、计算优先级3、计算负荷权重 四、核心调度器1、周期性调…...

网络安全法+网络安全等级保护

网络安全法 网络安全法21条 网络安全法31条 网络安全等级保护 网络安全等级保护分为几级? 一个中心&#xff0c;三重防护 等级保护2.0网络拓扑图 安全区域边界 安全计算环境 等保安全产品 物理机房安全设计...

持续集成对软件项目管理的作用

l、对项目目标管理的作用 软件项目的目标是开发出可运行的、客户满意的软件系统持续集成有统一的代 码库。要求开发人员定期地、不断地向代码库提交代码。新近提交的代码会经过编 译与测试&#xff0e;与代码库中旧有的代码相整合&#xff0c;形成安全稳定运行的代码库&…...

【Qt QAxObject】使用 QAxObject 高效任意读写 Excel 表

1. 用什么操作 Excel 表 Qt 的官网库中是不包含 Microsoft Excel 的操作库&#xff0c;关于对 Microsoft Excel 的操作库可选的有很多&#xff0c;包含基于 Windows 系统本身的 ActiveX、Qt Xlsx、xlsLib、LibXL、qtXLS、BasicExcel、Number Duck。 库.xls.xlsx读写平台Qt Xls…...

java八股文面试[多线程]——自旋锁

优点&#xff1a; 1. 自旋锁尽可能的减少线程的阻塞&#xff0c;这对于锁的竞争不激烈&#xff0c;且占用锁时间非常短的代码块来说性能能大幅度的提升&#xff0c;因为自旋的消耗会小于线程阻塞挂起再唤醒的操作的消耗 &#xff0c;这些操作会导致线程发生两次上下文切换&…...

分布式系统的多数据库,实现分布式事务回滚(1.7.0 seata整合2.0.4nacos)

正文 1、解决的应用场景是分布式事务&#xff0c;每个服务有独立的数据库。 2、例如&#xff1a;A服务的数据库是A1&#xff0c;B服务的数据库是B2&#xff0c;A服务通过feign接口调用B服务&#xff0c;B涉及提交数据到B2&#xff0c;业务是在B提交数据之后&#xff0c;在A服…...

PDF可以修改内容吗?有什么注意的事项?

PDF是一种跨平台的电子文档格式&#xff0c;可以在各种设备上轻松阅读和共享。许多人喜欢将文档转换为PDF格式以确保格式的一致性和易读性。但是&#xff0c;PDF文件一般被认为是“只读”文件&#xff0c;即无法编辑。那么&#xff0c;PDF文件是否可以修改呢&#xff1f; 答案是…...

为什么头部AI工厂已全面切换PyTorch 3.0静态图训练?揭秘2024年Q2实测吞吐提升3.8倍、成本下降41%的关键配置

第一章&#xff1a;PyTorch 3.0静态图训练的企业级演进全景PyTorch 3.0标志着深度学习框架从动态优先范式向动静统一架构的关键跃迁。其核心突破在于TorchDynamo Inductor后端的深度融合&#xff0c;使torch.compile()不再仅是实验性优化器&#xff0c;而成为企业级生产训练流…...

正交试验DOE在算法参数优化中的高效应用

1. 正交试验DOE&#xff1a;算法调参的"聪明捷径" 第一次接触算法参数优化时&#xff0c;我像大多数人一样陷入了暴力搜索的陷阱。记得当时调一个简单的随机森林模型&#xff0c;5个参数各试5个值&#xff0c;总共需要3125次训练&#xff01;直到发现正交试验设计&am…...

避坑指南:GF-3 SAR数据预处理中常见的5个错误及解决方法

GF-3 SAR数据预处理实战&#xff1a;5个关键错误分析与Python解决方案 在遥感数据处理领域&#xff0c;GF-3卫星的合成孔径雷达(SAR)数据因其全天候、全天时的观测能力而备受青睐。然而&#xff0c;从原始数据到可用成果的预处理过程中&#xff0c;即便是经验丰富的工程师也常会…...

3步打造纯净音乐体验:铜钟音乐开源播放器技术解析

3步打造纯净音乐体验&#xff1a;铜钟音乐开源播放器技术解析 【免费下载链接】tonzhon-music 铜钟 (Tonzhon.com): 免费听歌; 没有直播, 社交, 广告, 干扰; 简洁纯粹, 资源丰富, 体验独特&#xff01;(密码重置功能已回归) 项目地址: https://gitcode.com/GitHub_Trending/t…...

3个理由让你选择DeepSeek-Coder-V2:免费开源的AI编程助手

3个理由让你选择DeepSeek-Coder-V2&#xff1a;免费开源的AI编程助手 【免费下载链接】DeepSeek-Coder-V2 项目地址: https://gitcode.com/GitHub_Trending/de/DeepSeek-Coder-V2 从代码效率低下到开发流程革新的完整路径 在当今快节奏的软件开发环境中&#xff0c;开…...

ESP32按键状态机设计:工业级去抖与多事件识别

1. ESP32-Button 库深度解析&#xff1a;面向工业级人机交互的按键状态机设计与实现1.1 工程背景与设计动因在嵌入式系统开发中&#xff0c;按键处理看似简单&#xff0c;实则暗藏诸多工程陷阱。裸写digitalRead()配合delay()的“抖动延时法”在教学Demo中尚可接受&#xff0c;…...

OOM线上问题排查

场景&#xff1a; 项目中有一个接口&#xff0c;会进行全表查询&#xff0c;查出来3万条&#xff0c;查一次不会导致oom&#xff0c;但是频繁调用这个接口&#xff0c;上一次调用还没有来得及进行垃圾回收&#xff0c;下一次接口调用又来了&#xff0c;又有3万条数据&#xff0…...

避坑指南:从零搭建Anaconda+CUDA+PyTorch+Pycharm深度学习环境

1. 深度学习环境配置全景图 刚接触深度学习的新手往往会在环境配置这一步卡住好几天。我见过太多人在Anaconda、CUDA、PyTorch的版本兼容性问题上来回折腾&#xff0c;最后连代码都没开始写就放弃了。其实只要理解这四个核心组件的关系&#xff0c;配置过程就会变得清晰很多。 …...

5分钟快速部署!终极开源邮件营销平台BillionMail完全指南 [特殊字符]

5分钟快速部署&#xff01;终极开源邮件营销平台BillionMail完全指南 &#x1f680; 【免费下载链接】BillionMail Billion Mail is a future open-source email marketing platform designed to help businesses and individuals manage their email campaigns with ease 项…...

石家庄整家定制哪个好

在石家庄&#xff0c;寻找合适的整家定制服务&#xff0c;是许多家庭打造理想居住空间的重要一步。今天&#xff0c;我们想为您介绍一个专注于中高端整家定制的品牌——MJ.HOME美境美家木作。关于美境美家木作美境美家木作是一个集整案设计施工与定制家居于一体的品牌。他们致力…...