英文:
conditional statement for media query on tailwindcss
问题
如何在Tailwind中仅针对中等或大屏幕设置条件语句？
英文:
How can i put this
${window.scrollY > 0 ? " bg-slate-50" : ""}
Conditional statement only for medium or large screens on tailwind?
答案1
得分: 1
${window.scrollY > 0 ? "max-md:bg-slate-50" : ""}
你还可以在Tailwind的文档中查看更多信息：https://tailwindcss.com/docs/responsive-design#targeting-a-single-breakpoint
英文:
${window.scrollY > 0 ? "max-md:bg-slate-50" : ""}
you can also get the reference from the documentation of Tailwind for more info:
https://tailwindcss.com/docs/responsive-design#targeting-a-single-breakpoint
答案2
得分: 0
只需在您的代码中添加以下内容即可轻松完成：
className={md:${window.scrollY > 0 ? "bg-slate-50" : "bg-transparent"}}
这是Tailwind的方式来实现。否则，您始终可以编写自定义CSS。
请确保在您的 tailwind.config.js 中包含所需的变体，如果尚未启用：
module.exports = {
variants: {
backgroundColor: ['responsive', 'hover', 'focus'],
// ... 其他配置
},
}
英文:
You can easily do it by adding this in your code:
className={md:${window.scrollY > 0 ? "bg-slate-50" : "bg-transparent"}}
Thats tailwind way of doing it. otherwise you can always write the custom css.
Note Please make sure to include the required variant in your tailwind.config.js if it's not already enabled:
module.exports = {
variants: {
backgroundColor: ['responsive', 'hover', 'focus'],
// ... other configurations
},
}
答案3
得分: 0
<div className={`md:${window.scrollY > 0 ? " bg-slate-50" : "bg-transparent"}`}>
...
</div>
英文:
Code:
<div className={`md:${window.scrollY > 0 ? " bg-slate-50" : "bg-transparent"}`}>
...
</div>
You can follow this documentation for more info:
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论