在Tailwind CSS中使用媒體查詢的條件語句
P粉835428659
P粉835428659 2023-08-10 15:17:27
0
2
536
<p>如何表達這個意思</p> <pre class="brush:php;toolbar:false;">${window.scrollY > 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

#
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板