See original class names in the web

[Seanmclem]

When using with react native web, the class names are still transpiled to a bit of nonsense. How would I can figure it to still be able to see those class names for simpler debugging in Web?

[Jared Henderson]

we don't transpile the class names in the library. if you're seeing altered class names, it would be because of the framework you're using, or another library. we don't even preserve class names, since RN native (which is the only target this library officially supports) doesn't have CSS classes -- rather, the only thing this library does is allow you to write tailwind classes, and have them converted at runtime to RN style objects and passed to the underlying components.

[Seanmclem]

we don't transpile the class names in the library. if you're seeing altered class names, it would be because of the framework you're using, or another library. we don't even preserve class names, since RN native (which is the only target this library officially supports) doesn't have CSS classes -- rather, the only thing this library does is allow you to write tailwind classes, and have them converted at runtime to RN style objects and passed to the underlying components.

Well, with virtually no modifications, I am able to use this with react native web. In the class names are transpiled there to like 'css-73hdjd' kind of stuff. So I think it a valid concern.

[Jared Henderson]

So I think it a valid concern.

I don't think you're fully grasping what I was trying to say. React native doesn't have a className prop on it's core components, because there is no CSS in native environments. Instead, they support Stylesheet and the style prop, so you write stuff like this:

<View style={{backgroundColor: red}} />

That's RN's core api.

Now, imagine you wrote this function and used it instead:

function styleHelper(color) {
  return { backgroundColor: color };
}
// ...
<View style={styleHelper('blue')} />

You can see that it's just a simple helper function that creates a style object and passes it on.

That's literally all this library does, with a fancier syntax and a lot of optimizations and caching. But at it's core, it's a helper function that lets you pretend you're writing CSS tailwind classes, but it just boils them all down to one big style object and passes it to the RN components.

Now, if you're using RN and targeting Web, i have no idea what they do with the style prop. They may, for all I know extract out CSS and custom utilities and obfuscate them.

It is absolutely a legitimate concern, but it's a concern to raise with the React Native folks who handle the web target, not with this library, because all we do is provide a convenience abstraction over creating style objects, so it's not us that is causing your obfuscated class names.

i know it's tough, the mental model of react native, and then switching to the crazy double-reverse of writing for native and then targeting web is confusing. but what you're seeing is not from this library. hopefully that makes sense. 👍