84669 人学习
152542 人学习
20005 人学习
5487 人学习
7821 人学习
359900 人学习
3350 人学习
180660 人学习
48569 人学习
18603 人学习
40936 人学习
1549 人学习
1183 人学习
32909 人学习
如何表达这个意思
${window.scrollY > 0 ? " bg-slate-50" : ""}
只对中等或大屏幕尺寸的Tailwind进行条件语句检查吗?
你可以通过将以下代码添加到你的代码中来轻松实现:
className={md:${window.scrollY > 0 ? "bg-slate-50" : "bg-transparent"}}
这是Tailwind的做法。否则你可以自己编写自定义的CSS。
请注意,请确保在你的tailwind.config.js中包含所需的变体,如果还没有启用的话:
tailwind.config.js
module.exports = { variants: { backgroundColor: ['responsive', 'hover', 'focus'], // ... other configurations }, }
${window.scrollY > 0 ? "max-md:bg-slate-50" : ""}
您还可以从Tailwind文档中了解更多信息:https://tailwindcss.com/docs/responsive-design#targeting-a-single-breakpoint
你可以通过将以下代码添加到你的代码中来轻松实现:
className={md:${window.scrollY > 0 ? "bg-slate-50" : "bg-transparent"}}
这是Tailwind的做法。否则你可以自己编写自定义的CSS。
请注意,请确保在你的
tailwind.config.js
中包含所需的变体,如果还没有启用的话:${window.scrollY > 0 ? "max-md:bg-slate-50" : ""}
您还可以从Tailwind文档中了解更多信息:https://tailwindcss.com/docs/responsive-design#targeting-a-single-breakpoint