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

记录vite关于tailwindcss4.0-bate4出现margin[m-*]、padding[p-*]无法生效的问题。

环境如下:
vite:5.4.10
tailwindcss: 4.0.0-beta.4
@tailwindcss/vite: 4.0.0-beta.4

4.0默认的样式优先级比较低 如果使用了一些reset的css文件 那么很多样式会失效

例如:reset.css中

html,
body,
ul,
li,
h1,
h2,
h3,
h4,
h5,
h6,
dl,
dt,
dd,
ol,
input,
textarea,
th,
td,
div,
p,
select {margin: 0;padding: 0;
}

那么在这些元素中 使用class名称 m-*或者p-*则会优先级不够导致失效。
如果有类似的请记得删除 全局设置 margin归零 或者等待官方提高样式优先级

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

更新:翻文档发现原来官方已经默认移除了reset.css带来的margin属性,4.0bata版本没有移除所以导致样式优先级很低。

在这里插入图片描述


http://www.mrgr.cn/news/79043.html

相关文章:

  • 基于PySpark 使用线性回归、随机森林以及模型融合实现天气预测
  • 【Vue3】从零开始创建一个VUE项目
  • 【洛谷】P5738 【深基7.例4】歌唱比赛(详细注解)
  • hhdb数据库介绍(10-33)
  • 【时间之外】IT人求职和创业应知【53】-东莞也转型
  • Linux安装部署Redis教程
  • 神经网络中的优化方法(一)
  • Android 应用单元测试涉及 Telephony 环境初始化问题
  • 浏览器的事件循环机制
  • 深入解析 Dubbo 中的常见问题及优化方案: 数据量限制与配置错误20241203
  • 嵌入式系统应用-LVGL的应用-平衡球游戏 part1
  • 三维地形图计算软件(四)-用PYQT5+vtk画任意多面体示例
  • 澎峰科技助力中国移动 重磅发布智算“芯合”算力原生基础软件栈2.0
  • 网络安全-夜神模拟器如何通过虚拟机的Burp Suite代理应用程序接口
  • 3GPP R18 LTM(L1/L2 Triggered Mobility)是什么鬼?(三) RACH-less LTM cell switch
  • PROTEUS资源导引
  • flask的第一个应用
  • 浏览器渲染原理
  • 异常知识及其使用
  • 级联树结构TreeSelect和上级反查
  • mybatis-xml映射文件及mybatis动态sql
  • 嵌入式蓝桥杯学习1 点亮LED
  • 003-SpringBoot整合Pagehelper
  • C++学习笔记
  • springboot vue 会员收银系统 (12)购物车关联服务人员 订单计算提成 开源
  • 2.2 线性表的顺序表示