[Bug Report] Title input,button,textarea{color:inherit;font:inherit} 导致tailwind失效

[MinuteReversal]

Reproduction Link

https://codesandbox.io/p/devbox/vant-4-issue-template-forked-m3rfg7?file=%2Fsrc%2FApp.vue%3A16%2C3

Vant Version

4.9.17

Describe the Bug

vant/lib/index.css

input,button,textarea{color:inherit;font:inherit}

选择器。导致了tailwindcss 无法设置input button textarea元素的前景色。

Reproduce Steps

安装tainwind css到项目中 插入以下按钮在界面上

<button class="text-red-500">hello world</button>

Device / Browser

No response

[pangxie231]

在你的场景中，你是否考虑添加权重来符合你目前的需求，比如将类名修改为 !text-red

[MinuteReversal]

@pangxie231 在我的场景中我不太希望使用!important权重，会导致外层组件无法覆盖内部组件的样式。

[pangxie231]

https://developer.mozilla.org/zh-CN/docs/Web/CSS/@layer

可能是这个层级的原因，因为text-red-500在tailwind中是属于utilities层，而vant中的inherrit样式是在默认层，根据文档的解释，默认层会覆盖所有命名层，所以导致了text-red-500被覆盖,。不过这个估计是tailwind的问题，我在tailwind文档找了下，暂时还没找到更多信息。

[RainCount]

遇到同样的问题，暂时想不出很好的解决方法

[dengyusys]

我也遇到的这个问题，我在 使用 ul 标签时发现 tailwindcss 的 ml-auto 类无法使用，发现是 style/base.css 会重置全局样式，导致无法使用 ml-auto。我目前的解决方式是通过 pnpm patch 将这段代码删除。期待有更好的解决方法。

[sxh705]

在main.css内不要这样写：@import "tailwindcss";
而是这样：@import "tailwindcss/theme.css";
@import "tailwindcss/preflight.css";
@import "tailwindcss/utilities.css"; 就可以取消layer的限制了。

[liao666brant]

在main.css内不要这样写：@import "tailwindcss"; 而是这样：@import "tailwindcss/theme.css"; @import "tailwindcss/preflight.css"; @import "tailwindcss/utilities.css"; 就可以取消layer的限制了。

这样确实有用