英文:

conditional statement for media query on tailwindcss

问题 {#heading}

如何在Tailwind中仅针对中等或大屏幕设置条件语句？ 英文:

How can i put this

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

Conditional statement only for medium or large screens on tailwind?

答案1 {#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 {#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 {#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:

https://tailwindcss.com/docs/responsive-design