Provide a safer and future-proofed system font stack

[nternetinspired]

Hey guys!

This PR brings two discrete additions:

1. By transposing system-ui and BlinkMacSystemFont keywords, it eliminates the potential for issue which may occur if the font-stack were used in a shorthand declaration, as that causes IE and Edge to choke at -apple-system and ignore the entire declaration. See Implementing system fonts on Booking.com — A lesson learned for full details.

2. Future proofs the stack by adding support for the newer, unprefixed, SystemUI font-family keyword that was introduced with Chrome 56 with the aim of providing a standard, cross-browser implementation.

Thanks for your consideration.

Absolutely loving Tailwind so far, keep up the great work!

[sgraewe]

system-ui is not supported in IE11 and Edge

https://caniuse.com/#search=system-ui

[nternetinspired]

Correct @sgraewe but thats's kinda irrelevant, and why it's sensible to declare a font stack rather than a single family in the first place; a browser that doesn't understand it will just skip it and move on to the next one.

It's perfectly valid stack declaration, and causes no issues, for either Edge or IE;

The only issues with using such a stack in IE is with using the -apple-system keyword first, the issue that this PR will resolve by transposing the keywords, as described above.

[adamwathan]

Thanks!