Theme-ui: Fix @theme-ui/tailwind color conversion

[axe312ger]

When converting my theme-ui config to tailwind via @theme-ui/tailwind, the colors are not converted the correct way.

Current:
As the plugin does not touch the color config at all, it will result in the following structure:
https://github.com/system-ui/theme-ui/blob/master/packages/preset-tailwind/src/index.ts#L18-L29

Expected:
While tailwind expects a different structure for color palettes:
https://tailwindcss.com/docs/customizing-colors/#overriding-a-default-color

Workaround:
I was able to convert the structure on my own, but my lacking typescript knowledge prevents my to provide a working version of my fix as PR :(

https://github.com/axe312ger/gatsby-starter-theme-ui-emotion-tailwind/blob/master/tailwind.config.js#L9-L21

[mxstbr]

If you submit that as a PR without the correct TypeScript stuff I'll help you fix it up! How's that sound?

[axe312ger]

Found more Issues. Maybe related to tailwind v1.2.0 and https://github.com/ben-rogerson/twin.macro

Following classes are not available: pb-0 mb-0 text-sm. So far I found zeros and labeled sizes not working, pb-1 and up are working)

🕵

[axe312ger]

And yes Max, that sounds awesome. I'll submit a PR as soon I am sure I cover all/most cases :)

[axe312ger]

Following classes are not available: pb-0 mb-0 text-sm. So far I found zeros and labeled sizes not working, pb-1 and up are working)

Looks like this is clearly related to twin.macro as tailwind cli works fine with the generated config.

We opened a PR to fix this in twin.macro: https://github.com/ben-rogerson/twin.macro/pull/8

I'll further check with the colors and either close or update this issue :)

[axe312ger]

So updated my repos and the problem still exists.

@theme-ui/tailwind gives you an array of colors:

red: [
  null,
  '#fff5f5',
  '#fed7d7',
  '#feb2b2',
  '#fc8181',
  '#f56565',
  '#e53e3e',
  '#c53030',
  '#9b2c2c',
  '#742a2a',
],

While tailwindcss requires an map of colors:

red: {
  '100': '#fff5f5',
  '200': '#fed7d7',
  '300': '#feb2b2',
  '400': '#fc8181',
  '500': '#f56565',
  '600': '#e53e3e',
  '700': '#c53030',
  '800': '#9b2c2c',
  '900': '#742a2a',
},

See: https://tailwindcss.com/docs/customizing-colors#overriding-a-default-color

As https://github.com/ben-rogerson/twin.macro follows the tailwindcss structure, the wrong color format still breaks my gatsby projects when combining theme-ui & tailwind.

Will try to come up with an PR when I find time. Everybody else picking this up is very welcome 🙃

[mxstbr]

See #862!

[lachlanjc]

Closing as a duplicate of #862