Focus, android and all others states not working

[Kalleby Santos]

I'm trying to use focus: class with tw but it not working.

Working example (Default tailwind + nativewind):

<Text className="mt-6 text-2xl text-center font-heading text-gray-500 dark:text-white android:text-red-500">
       Hi from Tailwind
 </Text>

<TextInput
    className= 'w-full p-2 my-12 text-lg text-center text-gray-500 border-b  focus:border-green-500 '
    onChangeText={handleChangeText}
 />

Not Working example (using twrnc)

<Text style={tw`mt-6 text-2xl text-center font-heading text-gray-500 dark:text-white android:text-red-500`}>
       Hi from Tailwind
 </Text>

<TextInput
    style={tw`w-full p-2 my-12 text-lg text-center text-gray-500 border-b  focus:border-green-500`}
    onChangeText={handleChangeText}
 />

[Jared Henderson]

This library is only aiming to cover tailwindcss utilities that map directly to core style props in RN native. I think maybe focus: is not supported directly in RN (native).

I'm guessing you might be using RN web? If so, check out the discussion here: #125

[Kalleby Santos]

This library is only aiming to cover tailwindcss utilities that map directly to core style props in RN native. I think maybe focus: is not supported directly in RN (native).

I'm guessing you might be using RN web? If so, check out the discussion here: #125

Hi, I'm using RN for mobile, the examples of code that I wrote before as tested on android devices, both emulator and physical.
My solution has remove twrnc and just use nativewind + tailwindcss has a mentioned before.
I has very excited to use twrnc but the current stack is already covering the necessary features of my app.

[Jared Henderson]

ok, if NativeWind is working for you, that's great.

for future folks who come across this issue, i don't believe that focus exists as a core styling concept in RN Native, so I don't think there is a way to implement this for RN Native using tailwind utilities alone -- it would require some sort of setState dance.