如何解决Tailwind 中带有背景图像的深色变体
我尝试根据模式(默认和暗)使用不同的背景图像。一旦我使用自定义图像,似乎深色变体就不起作用。我在 Tailwind 的 instructions 之后添加了变体。
tailwind.config.js
module.exports = {
important: true,// Active dark mode on class basis
darkMode: "class",i18n: {
locales: ["en-US"],defaultLocale: "en-US",},purge: ['./src/**/*.{js,jsx,ts,tsx}','./public/index.html'],theme: {
extend: {
backgroundImage: theme => ({
'ysosb': "url('./images/y-so-serious.png')",'ysosw': "url('./images/y-so-serious-white.png')",})
}
},variants: {
extend: {
backgroundColor: ["checked"],backgroundImage: ["dark"],borderColor: ["checked"],inset: ["checked"],zIndex: ["hover","active"],plugins: [],future: {
purgeLayersByDefault: true,};
JSX 文件
<section className="dark:bg-ysosb bg-ysosw shadow">
...
</section>
解决方法
解决了!
我将 JSX 代码更改为:
<section bg-ysosw dark:bg-ysosb shadow text-black dark:text-white>
...
</section>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。