In <Text> and <Heading> components, passing a text-color className overrides a fontSize declared with more than three letters

[beliven-davide-lorigliola]

Description

In <Text> (and <Heading>) components, passing a text-color className overrides a fontSize declared with more than three letters

CodeSandbox/Snack link

In <Text> and <Heading> components, passing a text-color className overrides a fontSize declared with more than three letters

Steps to reproduce

1. Go to the Codesandbox example
2. You can see that I've created in tailwind.config.js two custom fontSizes, both have the same value - 100px - but differente names, 3xxl and 0xl.
3. I've remapped them in the ejected <Text> component.
4. In homepage you can see that if I pass to <Text> component the size of 3xxl and whatever text-color class, 3xxl is completely ignored
5. If I pass 3xxl as size without using a text-color class, it works.
6. If I use the 3 letters custom fontSize prop called 0xl and both a text-color class, it works as expected but if you create a new custom `fontSize" prop > 3 letters it will not work...

Tested locally also on Android and iOS, same problem...

gluestack-ui Version

0.7.22

Platform

• [x] Expo
• [ ] React Native CLI
• [ ] Next
• [x] Web
• [x] Android
• [x] iOS

Other Platform

No response

Additional Information

No response