记录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版本没有移除所以导致样式优先级很低。

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值