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

将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 日志如下&#xff1a; REGISTER sip:192.168.43.135 SIP/2.0 Via: SIP/2.0/WSS df7jal23ls0d.invalid;branchz9hG4bKurFnCK9qJuXQlSrbszSL1S6wbCokKlLr;rport From: <…...

Java入门基础学习笔记22——程序流程控制

程序流程控制&#xff1a;控制程序的执行顺序。 程序有哪些执行顺序&#xff1f; 顺序、分支和循环。 分支结构&#xff1a; if、switch 循环&#xff1a; for、while、do-while 顺序结构是程序中最简单最基本的流程控制&#xff0c;没有特定的语法结构&#xff0c;按照代码…...

java医院信息系统HIS源码SaaS模式Java版云HIS系统 接口技术RESTful API + WebSocket + WebService

java医院信息系统HIS源码SaaS模式Java版云HIS系统 接口技术RESTful API WebSocket WebService 云HIS是基于云计算的医疗卫生信息系统&#xff08;Cloud-Based Healthcare Information System&#xff09;&#xff0c;它运用云计算、大数据、物联网等新兴信息技术&#xff0c;…...

2024年成都高新区支持企业申报国家、省级、市级大数据产业发展、新一代信息技术与制造业融合发展、工业互联网推广应用等试点示范项目申报对象条件和奖补

一、申报对象 &#xff08;一&#xff09;本政策支持注册地址、税收关系在成都高新区&#xff0c;具有独立法人资格的企业。 &#xff08;二&#xff09;管理规范&#xff0c;无不良信用记录&#xff0c;自觉遵守安全生产、环境保护等方面的法律法规&#xff0c;近三年未发生…...

让《行列视》解放数据力量,提升业务洞察

在当今信息化浪潮下&#xff0c;数据已经成为企业发展的核心驱动力之一。如何更好地管理和利用数据&#xff0c;已成为企业发展过程中亟需解决的问题之一。而报表工具作为数据可视化和分析的利器&#xff0c;正逐渐受到企业的重视和青睐。 一、《行列视》作为报表工具的重要性…...

LeetCode 每日一题 ---- 【2244.完成所有任务需要的最少轮数】

LeetCode 每日一题 ---- 【2244.完成所有任务需要的最少轮数】 2244.完成所有任务需要的最少轮数方法&#xff1a;哈希表贪心 2244.完成所有任务需要的最少轮数 方法&#xff1a;哈希表贪心 用哈希表统计每个等级出现的次数 每次处理优先消费 3 个&#xff0c;m % 3 后&#…...

【RAG 去噪】引入 NLI 模型来为 RAG 去噪

论文&#xff1a;Making Retrieval-Augmented Language Models Robust to Irrelevant Context ⭐⭐⭐ ICLR 2024, arXiv:2310.01558 Code: github.com/oriyor/ret-robust 论文速读 这篇论文引入 NLI&#xff08;Natural Language Inference&#xff09;模型来判定 retrieved d…...

SQLite利用事务实现批量插入(提升效率)

在尝试过SQLite批量插入一百万条记录&#xff0c;执行时长高达20多分钟后&#xff0c;就在想一个问题&#xff0c;这样的性能是不可能被广泛应用的&#xff0c;更不可能出现在真实的生产环境中&#xff0c;那么对此应该如何优化一下呢&#xff1f; 首先分析一下批量插入的逻辑 …...

使用Python处理Excel数据:去除列中的双引号

目录 引言 技术背景 步骤概述 代码示例 案例分析 扩展内容 1. 处理多个列中的双引号 2. 处理大型Excel文件 3. 自定义函数处理数据 4. 错误处理和日志记录 结论 引言 在当今信息爆炸的时代&#xff0c;数据已经成为了各个行业最宝贵的资源之一。而Excel&#xff0c…...

未来互联网:Web3的技术革新之路

引言 随着技术的不断发展和社会的日益数字化&#xff0c;互联网作为信息交流和社交媒介的重要平台已经成为我们生活中不可或缺的一部分。然而&#xff0c;传统的互联网架构在数据安全、隐私保护和去中心化等方面存在着诸多挑战。为了解决这些问题&#xff0c;Web3技术应运而生…...

【练习】分治--快排思想

&#x1f3a5; 个人主页&#xff1a;Dikz12&#x1f525;个人专栏&#xff1a;算法(Java)&#x1f4d5;格言&#xff1a;吾愚多不敏&#xff0c;而愿加学欢迎大家&#x1f44d;点赞✍评论⭐收藏 目录 颜色分类 题目描述 题解 代码实现 排序数组 题目描述 题解 代码…...

Unity读书系列《Unity高级编程:主程手记》——C#技术要点

文章目录 前言一、业务逻辑优化技巧二、Unity3d中C#的底层原理三、List底层源码剖析四、Dictionary底层源码剖析五、浮点数的精度问题六、委托、事件、装箱、拆箱七、算法总结 前言 本文旨在总结某一概念的性质&#xff0c;并引出相关的技术要点。如果读者希望深入了解相关技术…...

MPNet:旋转机械轻量化故障诊断模型详解python代码复现

目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块(MBFM) 2.2 残差注意力金字塔模块(RAPM) 2.2.1 空间金字塔注意力(SPA) 2.2.2 金字塔残差块(PRBlock) 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

练习(含atoi的模拟实现,自定义类型等练习)

一、结构体大小的计算及位段 &#xff08;结构体大小计算及位段 详解请看&#xff1a;自定义类型&#xff1a;结构体进阶-CSDN博客&#xff09; 1.在32位系统环境&#xff0c;编译选项为4字节对齐&#xff0c;那么sizeof(A)和sizeof(B)是多少&#xff1f; #pragma pack(4)st…...

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1:执行计划绑定问题?尝试:SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库,并对 SQL 进行优化了,添加了强制索引。 UAT 环境已经生效,但 PROD 环境强制索…...

【JVM】- 内存结构

引言 JVM&#xff1a;Java Virtual Machine 定义&#xff1a;Java虚拟机&#xff0c;Java二进制字节码的运行环境好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收的功能数组下标越界检查&#xff08;会抛异常&#xff0c;不会覆盖到其他代码…...

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

智能分布式爬虫的数据处理流水线优化:基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天&#xff0c;数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具&#xff0c;在大规模数据获取中发挥着关键作用。然而&#xff0c;传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时&#xff0c;常出现数据质…...

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波(Mean Shift Filtering)函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...