Why doesn't Tailwind CSS consistenly use @media not all and (min-width: ) but mixes @media not all and (min-width: ) with @media (max-width: )?

[omymenzies]

For example:

• max-md generates @media not all and (min-width: 768px):
  
• max-[768px] generates @media (max-width: 768px) :
  

This causes confusion. I think max-md and max-[768px] should both generate either @media not all and (min-width: 768px) or @media (max-width: 768px) , so they'll be considered same type in media quiries to achieve consistency.

[MaKTaiL]

Yeah, I just noticed this too. I was trying to apply a breakpoint for my sidebar (visible at <= 768px) but the logic behind the default max- is definitely wrong (it works as < 768 instead of <=). They should follow the max-[ ] custom breakpoint which is @media (max-width: ***px).

[LAMSTREAM]

I guess its used to avoid conflict when you try to restrict the range of media query.

e.g. md:max-lg:bg-light-1 [md, lg)
lg:max-xl:bg-dark-1 [lg, xl)
This may avoid conflict at the point lg