-
Notifications
You must be signed in to change notification settings - Fork 674
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix @theme-ui/tailwind color conversion #698
Comments
If you submit that as a PR without the correct TypeScript stuff I'll help you fix it up! How's that sound? |
Found more Issues. Maybe related to tailwind v1.2.0 and https://github.com/ben-rogerson/twin.macro Following classes are not available: 🕵 |
And yes Max, that sounds awesome. I'll submit a PR as soon I am sure I cover all/most cases :) |
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: ben-rogerson/twin.macro#8 I'll further check with the colors and either close or update this issue :) |
So updated my repos and the problem still exists.
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 🙃 |
See #862! |
Closing as a duplicate of #862 |
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
The text was updated successfully, but these errors were encountered: