将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底层源码剖析五、浮点数的精度问题六、委托、事件、装箱、拆箱七、算法总结 前言 本文旨在总结某一概念的性质,并引出相关的技术要点。如果读者希望深入了解相关技术…...
【人工智能】神经网络的优化器optimizer(二):Adagrad自适应学习率优化器
一.自适应梯度算法Adagrad概述 Adagrad(Adaptive Gradient Algorithm)是一种自适应学习率的优化算法,由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率,适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...
生成 Git SSH 证书
🔑 1. 生成 SSH 密钥对 在终端(Windows 使用 Git Bash,Mac/Linux 使用 Terminal)执行命令: ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" 参数说明: -t rsa&#x…...
数据链路层的主要功能是什么
数据链路层(OSI模型第2层)的核心功能是在相邻网络节点(如交换机、主机)间提供可靠的数据帧传输服务,主要职责包括: 🔑 核心功能详解: 帧封装与解封装 封装: 将网络层下发…...
Neo4j 集群管理:原理、技术与最佳实践深度解析
Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档,本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石,用于构建高可用、可扩展且一致的图数据库服务…...
DBAPI如何优雅的获取单条数据
API如何优雅的获取单条数据 案例一 对于查询类API,查询的是单条数据,比如根据主键ID查询用户信息,sql如下: select id, name, age from user where id #{id}API默认返回的数据格式是多条的,如下: {&qu…...
ardupilot 开发环境eclipse 中import 缺少C++
目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++,无法导入ardupilot代码,会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...
Java入门学习详细版(一)
大家好,Java 学习是一个系统学习的过程,核心原则就是“理论 实践 坚持”,并且需循序渐进,不可过于着急,本篇文章推出的这份详细入门学习资料将带大家从零基础开始,逐步掌握 Java 的核心概念和编程技能。 …...
【OSG学习笔记】Day 16: 骨骼动画与蒙皮(osgAnimation)
骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术,它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton):由层级结构的骨头组成,类似于人体骨骼蒙皮 (Mesh Skinning):将模型网格顶点绑定到骨骼上,使骨骼移动…...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用
1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...
分布式增量爬虫实现方案
之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面,避免重复抓取,以节省资源和时间。 在分布式环境下,增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路:将增量判…...
