Using real tailwind names in style

[CurralesDragon]

I thought i would get feedback on the option of having real tailwind names in a style prop on objects.

e.g.

<Text styleName="text-blue-500">Blue Text</Text>;

Similar to: https://github.com/kristerkari/react-native-css-modules/blob/master/docs/setup-stylename.md

Any thoughts on why this may or may not be possible?

[TVke]

Hi @nicwhitts

I never read or heard something from this package/setup (trying it as we speak) I like what I see and you can just use the original tailwindcss package in here so go ahead as it has not the limitations react-native-tailwindcss has. (eg.: plugins are not supported in react-native-tailwindcss)

The only thing I am now testing is how it handles the difference between css and Yoga (react-native style engine). I see that it is a direct translator of CSS to JS styles. This is a problem as for example a box-shadow is extremely different in the react native styling world.

The reason I created this package is that I wanted something I would not need to think to hard about for things like a box-shadow or an object-fit. That these things that are differently named or sometimes supported but in a different way (eg.: elevation is a shadow effect on android)

This means that I would suggest to use react-native-css-modules for the small and base styles if you want too. When a error occurs when a style is not supported or recognised you can Use react-native-tailwindcss to fill in the gaps.

Hope this explains a bit why react-native-tailwindcss came to be.

greetings @TVke

[CurralesDragon]

That explains it!

Something i think you might be interested in, i just did a quick spike test and this seems to work: (Will continue to test all the styles.)

There is a package made for react native tachyons here: https://github.com/shipt/react-native-tachyons

I built a stylesheet object using your generator but without translating the keys, and then returned it in the build method of the tachyons https://github.com/shipt/react-native-tachyons/blob/master/src/build.js

So basically the tachyons library is now using the tailwind syntax

And it works with both the styled and T:

<Text style={T('text-red-500')}>Test text</Text>

or

const TestText = styled(Text)`text-red-500`

Am i right in thinking your generator handles the problems you mentioned, e.g the shadow etc? So this should function the same but with the above syntax instead of t.textRed500?

[TVke]

Hey @nicwhitts

The first idea I had was to do stuff like:

<Text style={[t['text-red-500'], t['text-center']]}>Test text</Text>

The big problem I found was the typing work was huge. One of the goals of the original tailwindcss is speed. In the syntax above I tried a few pages but got tired of the brackets and the dashes.

I then thought that the object syntax was way cleaner, faster and more readable. The only compromise I needed to make is the dashes (in an early version I tried _).

So after much trying I decided that the CamelCase syntax provided the best naming convention for it's speed and clarity.

I like the way you thing and I have considered a lot and the tachyons seem really cool but for now it wil stay on the CamelCase.

I'm writing docs for this package and I think there is a page you will definitely would want to read: https://tvke.github.io/react-native-tailwindcss/

greetings @TVke

[CurralesDragon]

That's cool :) Good job by the way