在Tailwind CSS中使用媒体查询的条件语句
P粉835428659
P粉835428659 2023-08-10 15:17:27
[React讨论组]
<p>如何表达这个意思</p> <pre class="brush:php;toolbar:false;">${window.scrollY &gt; 0 ? " bg-slate-50" : ""}</pre> <p>只对中等或大屏幕尺寸的Tailwind进行条件语句检查吗?</p>
P粉835428659
P粉835428659

全部回复(2)
P粉676588738

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

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

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

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

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

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

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号