Global styles breakpoint incorrect ordering

[ben-rogerson]

I've forked this example and added a plugin to the tailwind config file using the addComponent function. And my css is added in wrong order, so the bug is there.

Plugin Log output

CSS output

Originally posted by @LouisJackson in #277 (comment)

The breakpoint order that's created by twin is incorrect:

{
  "--breakpoint": "\"sm\"",
  "@media (min-width: 1536px)": {
    "--breakpoint": "\"2xl\""
  },
  "@media (min-width: 1280px)": {
    "--breakpoint": "\"xl\""
  },
  "@media (min-width: 1024px)": {
    "--breakpoint": "\"lg\""
  },
  "@media (min-width: 768px)": {
    "--breakpoint": "\"md\""
  }
}

The culprit is the .reverse() here - the array reversal was added as styles in other situations were being supplied in reverse.
This deserves another review to see if an alternative fix can be made.