Tailwind preset improvements

[mxstbr]

In order to make the Tailwind preset more approachable for people that already know Tailwind, we should:

• Font sizes should have the same aliases (e.g. lg = 2)
• Colors should be aliased to the same aliases * 100, e.g. purple.5 === purple.500
• Breaking change for a major version: Make the padding scale match Tailwind's

[jxnblk]

I'm guessing by "aliases" you mean adding keys to match based on the current keys to prevent breaking changes?

[mxstbr]

Yes exactly! 👍 Essentially:

let fontSizes = [...]
fontSizes.lg = 2;

let colors = {...};
colors.purple.500 = colors.purple[5];

In that way, you can choose whether you want to use the underlying system tailwind-style (if you're used to their classnames already) or theme-ui style.

[LekoArts]

Not sure if this is a bug or if this is fixable, but the padding scale doesn't match Tailwind's for some reason

iirc this was just copied over from the other presets (maybe too be coherent?)

[mxstbr]

iirc this was just copied over from the other presets (maybe to be coherent?)

Should be copied from Tailwind, no? 🤔

[LekoArts]

Edited my message to clarify

Yeah, even though this will be a breaking change, this should be done IMO if this is called the "tailwind preset". Jackson might have some opinions on that.

[mxstbr]

I strongly think if it's the Tailwind preset it should use the Tailwind system, not half of the Tailwind system and half random values :wink:

[jxnblk]

If you want to use a lesser spacing scale, that's fine, but yeah it'd be a breaking change and would potentially make the preset less interoperable with other Theme UI presets

[LekoArts]

and would potentially make the preset less interoperable with other Theme UI presets

That's a good point 👍 And I personally haven't missed Tailwind's scale.

[axe312ger]

Uhh nice, thanks for the mention @mxstbr

Next to the issue with the colors, I found out as well that values from sizes property are not correctly transformed into the format spacing of tailwind expects.

Also extending min/max sizes with our custom size variables, but thats personal opinion I guess.

https://github.com/axe312ger/gatsby-mdx-suite/blob/big-pre-beta-refactor/themes/core/gatsby-node.js#L26-L80

Note: My issues are probably within @theme-ui/tailwind, not in @theme-ui/preset-tailwind

[lachlanjc]

Should also update with the new Tailwind 2 color palette :+1:

[lachlanjc]

Closed by https://github.com/system-ui/theme-ui/pull/2357!