Breakpoint media queries are translated incorrectly

[DavidJFelix]

Issue that I'm seeing

I'm using the tailwind macro with emotion, and with this case:

css={tw`
  w-screen lg:w-3/4
  pl-2 md:pl-4 lg:pl-1
`}

What I'm seeing is the large width is applied but the medium left padding is taking precedence over the large left padding. The only reason this would be the case is if the large media query for left padding happens before the medium query.

Expected Behavior

When tailwind is used in a utility class manner, ie:

className="pr-2 sm:pr-4 lg:pr-1 md:pr-2"

order does not matter. Large will always override medium because CSS treats these classes as equals and prefers the closer media query. This is the expected end result -- all larges have higher priority than all mediums. The expected result within this macro is that media queries are placed into the correct order when being translated into one style.

Workarounds / Caveats

I'm able to fix the faulty behavior by defining small and medium before large:

w-screen sm:w-screen md:w-screen lg:w-3/4
pl-2 sm:pl-4 md:pl-2 lg:pl-1

But this doesn't work if I place them after the left padding. In fact, the order the classes are defined matters completely to translation.

[ben-rogerson]

Checkout Twin - You won't need to worry about this as I'm ordering the screens by the order defined in the screen part of your tailwind.config.js