将TailwindCSS默认单位rem转换为px
前言:
我这里需要将 默认的rem 转换为 px 原因是要使用 postcss-px-to-viewport 插件做移动端适配。
在tailwind.config.js文件中进行配置:
注意:这里 padding(内边距)、spacing(外边距)、width(宽度)、height(高度)的转化都 *4,所以针对上述这几个属性配置后的使用效果示例如下:
p-4 ==> padding: 16px;
ml-1 ==> margin-left: 4px;
w-2 ==> width: 8px;
h-3 ==> height: 12px;
leading-4 ==> line-height: 16px;
而 borderRadius(圆角)、 fontSize(字体)这两个属性就是直接转化,示例如下:
text-18 ==> font-size: 18px;
rounded-16 ==> border-radius: 16px;
/** @type {import('tailwindcss').Config} */
export default {content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],theme: {// 内边距padding: Array.from({ length: 1000 }).reduce((map, _, index) => {map[index] = `${index * 4}px`return map}, {}),// 外边距spacing: Array.from({ length: 1000 }).reduce((map, _, index) => {map[index] = `${index * 4}px`return map}, {}),// 圆角borderRadius: Array.from({ length: 100 }).reduce((map, _, index) => {map[index] = `${index}px`return map}, {}),extend: {// 宽度width: Array.from({ length: 1000 }).reduce((map, _, index) => {map[index] = `${index * 4}px`return map}, {}),// 高度height: Array.from({ length: 1000 }).reduce((map, _, index) => {map[index] = `${index * 4}px`return map}, {}),// 字体大小fontSize: Array.from({ length: 100 }).reduce((map, _, index) => {map[index] = `${index}px`return map}, {}),// 行高lineHeight: Array.from({ length: 1000 }).reduce((map, _, index) => {map[index] = `${index * 4}px`return map}, {}),},},plugins: [],
}
相关文章:
将TailwindCSS默认单位rem转换为px
前言: 我这里需要将 默认的rem 转换为 px 原因是要使用 postcss-px-to-viewport 插件做移动端适配。 在tailwind.config.js文件中进行配置: 注意:这里 padding(内边距)、spacing(外边距)、width…...
命令模式(命令)
命令模式 文章目录 命令模式什么时命令模式通过示例了解命令模式 什么时命令模式 命令模式(Command),将一个请求封装为一个对象,从而使你可用不同的请求对客户进行参数化:对请求排队或记录请求日志,以及支持可撤销的操作。 通过示例了解命令模…...
Android ashmem 原理分析
源码基于:Andoird U Kernel-5.10 0. 简介 ashmem 称为匿名共享内存(Anonymous Shared Memory),它以驱动程序的形式实现在内核空间中。它有两个特点: 能否辅助内存管理系统来有效地管理不再使用的内存块(pin / unpin); 通过Bind…...
redis报错500
之前自己举一反三把value也给序列化了: 然后报错了: 原因是这里传入的是Integer类型,序列化的话就变为string类型了...
GPT-3
论文:Language Models are Few-Shot Learners(巨无霸OpenAI GPT3 2020) 摘要 最近的工作表明,通过对大量文本进行预训练,然后对特定任务进行微调,在许多NLP任务和基准方面取得了实质性进展。虽然这种方法…...
MATLAB数组
文章目录 数组创建通过冒号创建一维数组通过logspace函数创建一维数组通过linspace函数创建一维数组 通过randperm生成随机整数排列运算算术运算关系运算逻辑运算优先顺序 矩阵创建矩阵操作下标引用矩阵信息提取删除与扩展合并矩阵元素的运算矩阵运算 数组 在MATLAB中一般使用…...
JAVA实验项目(二): 抽象类、接口的定义与使用
实验项目二 抽象类、接口的定义与使用 Tips:"分享是快乐的源泉💧,在我的博客里,不仅有知识的海洋🌊,还有满满的正能量加持💪,快来和我一起分享这份快乐吧😊&…...
JVM内存模型最新面试题(持续更新)
问题:java中创建的对象一般放在哪里?(全流程包含从创建到回收) 回答 大部分对象在堆中,这个基本都知道; 少部分对象是会在栈中的,比如作用域不局限于方法内的方法内部变量,这类对象的特征一般就是生命周期…...
Nginx wss to ws 折腾记
jssip 或 sipml5 <----wss--->nginx<---ws---->fs(5066) fs_cli -x sofia loglevel all 9 日志如下: REGISTER sip:192.168.43.135 SIP/2.0 Via: SIP/2.0/WSS df7jal23ls0d.invalid;branchz9hG4bKurFnCK9qJuXQlSrbszSL1S6wbCokKlLr;rport From: <…...
Java入门基础学习笔记22——程序流程控制
程序流程控制:控制程序的执行顺序。 程序有哪些执行顺序? 顺序、分支和循环。 分支结构: if、switch 循环: for、while、do-while 顺序结构是程序中最简单最基本的流程控制,没有特定的语法结构,按照代码…...
java医院信息系统HIS源码SaaS模式Java版云HIS系统 接口技术RESTful API + WebSocket + WebService
java医院信息系统HIS源码SaaS模式Java版云HIS系统 接口技术RESTful API WebSocket WebService 云HIS是基于云计算的医疗卫生信息系统(Cloud-Based Healthcare Information System),它运用云计算、大数据、物联网等新兴信息技术,…...
2024年成都高新区支持企业申报国家、省级、市级大数据产业发展、新一代信息技术与制造业融合发展、工业互联网推广应用等试点示范项目申报对象条件和奖补
一、申报对象 (一)本政策支持注册地址、税收关系在成都高新区,具有独立法人资格的企业。 (二)管理规范,无不良信用记录,自觉遵守安全生产、环境保护等方面的法律法规,近三年未发生…...
让《行列视》解放数据力量,提升业务洞察
在当今信息化浪潮下,数据已经成为企业发展的核心驱动力之一。如何更好地管理和利用数据,已成为企业发展过程中亟需解决的问题之一。而报表工具作为数据可视化和分析的利器,正逐渐受到企业的重视和青睐。 一、《行列视》作为报表工具的重要性…...
LeetCode 每日一题 ---- 【2244.完成所有任务需要的最少轮数】
LeetCode 每日一题 ---- 【2244.完成所有任务需要的最少轮数】 2244.完成所有任务需要的最少轮数方法:哈希表贪心 2244.完成所有任务需要的最少轮数 方法:哈希表贪心 用哈希表统计每个等级出现的次数 每次处理优先消费 3 个,m % 3 后&#…...
【RAG 去噪】引入 NLI 模型来为 RAG 去噪
论文:Making Retrieval-Augmented Language Models Robust to Irrelevant Context ⭐⭐⭐ ICLR 2024, arXiv:2310.01558 Code: github.com/oriyor/ret-robust 论文速读 这篇论文引入 NLI(Natural Language Inference)模型来判定 retrieved d…...
SQLite利用事务实现批量插入(提升效率)
在尝试过SQLite批量插入一百万条记录,执行时长高达20多分钟后,就在想一个问题,这样的性能是不可能被广泛应用的,更不可能出现在真实的生产环境中,那么对此应该如何优化一下呢? 首先分析一下批量插入的逻辑 …...
使用Python处理Excel数据:去除列中的双引号
目录 引言 技术背景 步骤概述 代码示例 案例分析 扩展内容 1. 处理多个列中的双引号 2. 处理大型Excel文件 3. 自定义函数处理数据 4. 错误处理和日志记录 结论 引言 在当今信息爆炸的时代,数据已经成为了各个行业最宝贵的资源之一。而Excel,…...
未来互联网:Web3的技术革新之路
引言 随着技术的不断发展和社会的日益数字化,互联网作为信息交流和社交媒介的重要平台已经成为我们生活中不可或缺的一部分。然而,传统的互联网架构在数据安全、隐私保护和去中心化等方面存在着诸多挑战。为了解决这些问题,Web3技术应运而生…...
【练习】分治--快排思想
🎥 个人主页:Dikz12🔥个人专栏:算法(Java)📕格言:吾愚多不敏,而愿加学欢迎大家👍点赞✍评论⭐收藏 目录 颜色分类 题目描述 题解 代码实现 排序数组 题目描述 题解 代码…...
Unity读书系列《Unity高级编程:主程手记》——C#技术要点
文章目录 前言一、业务逻辑优化技巧二、Unity3d中C#的底层原理三、List底层源码剖析四、Dictionary底层源码剖析五、浮点数的精度问题六、委托、事件、装箱、拆箱七、算法总结 前言 本文旨在总结某一概念的性质,并引出相关的技术要点。如果读者希望深入了解相关技术…...
eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)
说明: 想象一下,你正在用eNSP搭建一个虚拟的网络世界,里面有虚拟的路由器、交换机、电脑(PC)等等。这些设备都在你的电脑里面“运行”,它们之间可以互相通信,就像一个封闭的小王国。 但是&#…...
XCTF-web-easyupload
试了试php,php7,pht,phtml等,都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接,得到flag...
【Java_EE】Spring MVC
目录 Spring Web MVC 编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 编辑参数重命名 RequestParam 编辑编辑传递集合 RequestParam 传递JSON数据 编辑RequestBody …...
OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波(Mean Shift Filtering)函数meanShiftFiltering()
操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 在 GPU 上对图像执行 均值漂移滤波(Mean Shift Filtering),用于图像分割或平滑处理。 该函数将输入图像中的…...
站群服务器的应用场景都有哪些?
站群服务器主要是为了多个网站的托管和管理所设计的,可以通过集中管理和高效资源的分配,来支持多个独立的网站同时运行,让每一个网站都可以分配到独立的IP地址,避免出现IP关联的风险,用户还可以通过控制面板进行管理功…...
STM32HAL库USART源代码解析及应用
STM32HAL库USART源代码解析 前言STM32CubeIDE配置串口USART和UART的选择使用模式参数设置GPIO配置DMA配置中断配置硬件流控制使能生成代码解析和使用方法串口初始化__UART_HandleTypeDef结构体浅析HAL库代码实际使用方法使用轮询方式发送使用轮询方式接收使用中断方式发送使用中…...
android13 app的触摸问题定位分析流程
一、知识点 一般来说,触摸问题都是app层面出问题,我们可以在ViewRootImpl.java添加log的方式定位;如果是touchableRegion的计算问题,就会相对比较麻烦了,需要通过adb shell dumpsys input > input.log指令,且通过打印堆栈的方式,逐步定位问题,并找到修改方案。 问题…...
MacOS下Homebrew国内镜像加速指南(2025最新国内镜像加速)
macos brew国内镜像加速方法 brew install 加速formula.jws.json下载慢加速 🍺 最新版brew安装慢到怀疑人生?别怕,教你轻松起飞! 最近Homebrew更新至最新版,每次执行 brew 命令时都会自动从官方地址 https://formulae.…...
Qt 事件处理中 return 的深入解析
Qt 事件处理中 return 的深入解析 在 Qt 事件处理中,return 语句的使用是另一个关键概念,它与 event->accept()/event->ignore() 密切相关但作用不同。让我们详细分析一下它们之间的关系和工作原理。 核心区别:不同层级的事件处理 方…...
小木的算法日记-多叉树的递归/层序遍历
🌲 从二叉树到森林:一文彻底搞懂多叉树遍历的艺术 🚀 引言 你好,未来的算法大神! 在数据结构的世界里,“树”无疑是最核心、最迷人的概念之一。我们中的大多数人都是从 二叉树 开始入门的,它…...
