CODEWITHSUNDEEP
reactjstailwind-csstailwind-3
Roger
Roger

Reputation: 1

Tailwind Breakpoints are not working even though in correct order

My classes are in correct order but still getting an error

enter image description here

<div className="w-[300px] h-[300px] xs:w-[200px] xs:h-[200px] md:w-[350px] md:h-[350px] xl:w-[500px] xl:h-[500px] flex justify-center items-center bg-transparent border-4 border-[#EB5B2F] rounded-full"></div>

screens: {
        xxs: { max: "340px" },
        xs: { max: "480px" },
        sm: { max: "576px" },
        md: { max: "768px" },
        "md-lg": { max: "991px" },
        lg: { max: "1080px" },
        xl: { max: "1200px" },
      },

enter image description here

I tried many things but none seem to be working. Does anybody know why this issue is happening? Are there any solutions?

Upvotes: 0

Views: 79

Answers (1)

Nardin SY
Nardin SY

Reputation: 1

Make sure to list max-width breakpoints in descending order so that they override each other as expected.

https://tailwindcss.com/docs/screens#advanced-configuration

screens: {
  xl: { max: "1200px" },
  lg: { max: "1080px" },
  "md-lg": { max: "991px" },
  md: { max: "768px" },
  sm: { max: "576px" },
  xs: { max: "480px" },
  xxs: { max: "340px" },
},

Upvotes: 0

Related Questions