jdf2e / nutui

京东风格的移动端 Vue 组件库,支持多端小程序(A Vue.js UI Toolkit for Mobile Web)
https://nutui.jd.com
MIT License
6.14k stars 833 forks source link

引入tailwindcss后主题色丢失 #2450

Closed JxJPu9bD closed 1 year ago

JxJPu9bD commented 1 year ago

NutUI scenes(nutui 场景)

H5(@nutui/nutui)

NutUI-vue version(nutui-vue 版本)

4.1.1

Vue version(vue 版本)

3.3.4

Operating environment(运行环境)

dev:h5

Citation method(引用方式)

npm

Node version(node 版本)

16.20.0

Browser and its version(浏览器及其版本)

chrome(115.0.5790.102)

System and its version(系统及其版本)

macOS(12.5.1)

Reproduction link(重现链接)

codesandbox.io

Steps to reproduce(重现步骤)

index 页面是有一个登录按钮的, 但是 项目引入了tailiwindcss后 这个按钮增加了一个 taro-button-core 的class, 里面有一个 background-image 的属性, 然后导致按钮背景变为白色不可见, 可以右键检查看到 按钮在hello 文本的下方,

What is expected?(期望的结果是什么?)

能按照主题正常显示

What is actually happening?(实际的结果是什么?)

实际按钮不可背景色丢失了

JxJPu9bD commented 1 year ago
image

如果不引入tailwindcss的话没有这个 class 如果取消background-image后或者设置背景色可使按钮可见, 但我不能每个按钮都去加一遍

JxJPu9bD commented 1 year ago
image

取消属性后按钮可见

JxJPu9bD commented 1 year ago
image

移除tailwindcss后则没有这个class 和属性

eiinu commented 1 year ago

image 如果不引入tailwindcss的话没有这个 class 如果取消background-image后或者设置背景色可使按钮可见, 但我不能每个按钮都去加一遍

图中的 taro-button-core 类名是灰色的,并未生效。实际生效的是 [type='button'] 这个选择器,它是由 tailwind 引入的,因此也应该从 tailwind 配置中解决。

JxJPu9bD commented 1 year ago

好的 我检查下