媒体查询的顺风问题

Question

我有这样的查询

screens: {
414: { max: "414px" },
500: { max: "500px" },
630: { max: "630px" },
720: { max: "720px" },
840: { max: "840px" },
1000: { max: "1000px" },
1230: { max: "1230px" },
}

元素

<div className="absolute right-0 bottom-0 840:-top-[350px] 500:-top-[150px]"> 
590 € 
</div>

由于某些原因它不想重写top属性

Answer 1

Maybe you can use this..
But tailwind is use min width not max width
You can read the docuentation here https://tailwindcss.com/docs/screens 
{
"screens": {
"414": "414px",
// => @media (min-width: 414px) { ... }
"500": "500px",
"630": "630px",
"720": "720px",
"840": "840px",
"1000": "1000px",
"1230": "1230px"
}
}

Answer 2

要使用max-width而不是min-width，请确保使用像xl这样的字母表并按降序排列，以便它们按预期相互覆盖。

screens: {
xl: {'max': '1199px'},
lg: {'max': '1029px'},
md: {'max': '829px'},
sm: {'max': '575px'},
},