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