icebreaker-template/weapp-native-mina-tailwindcss-template

Backgrounds - Gradient Color Stops 不生效

Opened this issue · 1 comments

deajax commented

我自定义了brand color属性，但是配置渐变的时候，小程序不生效：
<view class="from-brand-200 bg-gradient-to-b">

生成的app.wxss代码为：

.from-brand-200 { 
	--tw-gradient-from: #FDB5AF var(--tw-gradient-from-position); 
	--tw-gradient-to: rgb(253 181 175 / 0) var(--tw-gradient-to-position); 
	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); 
}
.bg-gradient-to-b { 
	background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); 
}



看起来没啥问题，但是就是不生效。

sonofmagic commented

我在页面里试了一下 <view class="px-4 py-1 bg-gradient-to-b from-blue-500">tdesign-miniprogram 组件</view>

是生效的。

请问你这个是不是写在组件里的? 因为原生小程序默认带有组件样式隔离的。需要在对应的 json 文件里，这样配置才能生效:

{
  "styleIsolation": "apply-shared"
}

详见：

https://github.com/sonofmagic/weapp-native-mina-tailwindcss-template#%E7%BB%84%E4%BB%B6%E6%A0%B7%E5%BC%8F%E9%9A%94%E7%A6%BB

  • 👍1