CODEWITHSUNDEEP
tailwind-css
undefined
undefined

Reputation: 15

Tailwind issue with media queries

I have such queries

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

And such element

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

And for some reason it doesn't want to override top property

Upvotes: 1

Views: 728

Answers (2)

sabdahtb
sabdahtb

Reputation: 251

Maybe you can use this. Tailwind uses min width, not max width You can read the documentation 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"
      }
    }

Upvotes: 3

FeelRightz
FeelRightz

Reputation: 2979

To use max-width instead of min-width, make sure you using alphabet like xl and descending order, so that they override each other as expected.

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

Upvotes: 0

Related Questions