arbitrary named colors and font family

[aretrace]

When attempting to use arbitrary values in the font family utility class (i.e., font-[Baskerville]) and/or using a RN supported named color in the background color utility class (i.e., bg-[lemonchiffon]) I get the following error warning(s):

`[arbitrary value here]` unknown or invalid utility

Current setup:
M1 mac 14.5
node 20.12.2
expo 51.0.11 (default template)
twrnc 4.2.0
ios 17.5 && web

I assume there may be other utility classes whose arbitrary values not currently functioning as expected.

[jaredh159]

hi, thanks for the issue!

it's not so much that these aren't working as expected as that they haven't been implemented yet. as noted in the readme, arbitrary support was implemented for the most common use cases, and it's been slowly extending as people open issues requesting support for more, like this one.

i'm sympathetic to wanting both of these use cases. if you wanted to PR it, you're welcome, otherwise i'll try to do it before too long.

couple notes: in the named color case, i think we'd want to validate it against the list here: https://reactnative.dev/docs/colors#named-colors

and, for arbitrary font families: i think that RN native (not web) has no concept of stacks of families, so we would pull just Baskerville from the list in your example: font-[Baskerville,_Palatino], so there would be no point in writing both, as we can't generate the styles differently... or maybe we could check the platform and render it differently for web. this library doesn't have the goal of supporting RN web, but where it's easy to make it play nice with web, i'm ok with that, and i'm already thinking about implementing a web: prefix. see #301

[aretrace]

Hi 👋,

Your right, RN does not have font family stacks (I was testing your library in a web context at the time of writing the issue). I imagine rendering differently based on the web: prefix could be feasible (e.g., given a utility class without a prefix it would work as it does now, given a web: prefix it would only apply in a web environment and not in a native one, if there are two utility class with one having no prefix and another with the web: prefix then a platform check is done to apply that style appropriately to its relevant platform).

Given the focus is not towards RNW, have you given any thought about preemptive react-strict-dom support. Listening to React team devs it seems this is the eventual future of RN.

[jaredh159]

Given the focus is not towards RNW, have you given any thought about preemptive react-strict-dom support. Listening to React team devs it seems this is the eventual future of RN.

I haven't yet, nor have I really even looked into any React 19 stuff. TBH I don't do a ton with RN anymore (I built this library a few years ago when I was working on an RN app, and it's in maintenance mode now) - most of my day to day work is not in React or web tech these days. Thats not to say this library is unmaintained, I try to stay on top of things for the most part, but I'm just honestly not deeply invested in the React or RN world.

[aretrace]

Thank you for your honesty. I recently started using your library due to the instability I experienced with NativeWind, and I must say, twrnc has been fantastic so far! I understand there are some architectural differences between twrnc and NativeWind. Currently I see twrnc is the best option for using Tailwind on React Native. Finding a maintainer might be a future possibility. I would be interested if you have any resources you found helpful in learning to write compilation tools.

[jaredh159]

I would be interested if you have any resources you found helpful in learning to write compilation tools.

parsers, interpreters and compilers are sort of my programming hobby. if you're interested in learning about them my recommendation is to start by coding along with one of two books: Thorston Ball's "Writing a compiler in Go", or Bob Nystrom's "Crafting Interpreters". i've written Thorston's "monkey" language in 4 or 5 different languages, it's how i teach myself a new language.

Finding a maintainer might be a future possibility.

yeah, at some point perhaps. i'm not at that point yet, i'm still committed to this project and am actively maintaining it, i just can't say I'm immersed in the world of React and fully staying up with all of the future directions.

[jaredh159]

arbitrary colors (bg-[lemonchiffon]) is now implemented in v4.4.0. i'll try to get to arbitrary font stacks fairly soon. i'll keep this open until that is finished.