Twin.macro: extended colors (in object format) including a default color name gets replaced with the default colors value

[trkaplan]

in tailwind.config.js if you define a color, with a name including a default colors name in object format, gets the value of the default color.
ie.
module.exports = { theme: { extend: { colors: { 'my-blue': { 100: '#2200ff' } } } } }
There is a class blue-100 in tailwind default color palette. So when you use my-blue-100 twin.macro uses that color value instead of the one defined in this config.
That looks like a regex issue I think. It happens in text-color, bg-color or border-color.

Here is the sample forked from the starter.
https://codesandbox.io/s/next-emotion-tailwind-twin-starter-tf34f?file=/tailwind.config.js

Thanks @regenrek for giving point to when color definition is an object not a string.

[ben-rogerson]

Thanks for the bug report, I'm looking into it 👍

[ajitid]

For me extend's functionality for colors is completely broken, even if I define colors in plain string format. Either it does not identifies the color which is defined, or like author said, reverts to an inbuilt one.

[ben-rogerson]

@ajitid could you please post your config that demonstrates the bug so I can assess if its the same?

[ajitid]

Oh sorry, I think I didn't restarted dev server so updated config wasn't picked up. Passing plain string does work, its what OP posted which isn't working.

[ben-rogerson]

This match bug was fixed in 1.5.1 🎉

Feel free to reopen the issue if there's any problems.

[avinash-BB]

Seeing this issue again with v1.8.3
Sample tailwind config which reproduces the issue:
module.exports = { theme: { extend: { colors: { 'my-green': { 100: '#F1F8E6' } } } } }
Then using 'bg-my-green-100' doesn't apply '#F1F8E6', instead it applies tailwind's default green-100 color which is '#F0FFF4'.

[ben-rogerson]

@avinash-BB I couldn’t see any issues using custom colors, check out this demo here