在Tailwind CSS中使用媒体查询的条件语句

Question

如何表达这个意思

${window.scrollY > 0 ? " bg-slate-50" : ""}

只对中等或大屏幕尺寸的Tailwind进行条件语句检查吗？

Answer 1

你可以通过将以下代码添加到你的代码中来轻松实现：

className={md:${window.scrollY > 0 ? "bg-slate-50" : "bg-transparent"}}

这是Tailwind的做法。否则你可以自己编写自定义的CSS。

请注意，请确保在你的tailwind.config.js中包含所需的变体，如果还没有启用的话：

module.exports = {
      variants: {
        backgroundColor: ['responsive', 'hover', 'focus'],
        // ... other configurations
      },
}

Answer 2

${window.scrollY > 0 ? "max-md:bg-slate-50" : ""}

您还可以从Tailwind文档中了解更多信息： https://tailwindcss.com/docs/responsive-design#targeting-a-single-breakpoint