1

I am using Nativewind (AKA Tailwind) for styling and I have a styled component:

export const StyledTextInput = styled(
  TextInput,
  'border-solid border-2 border-gray-200 bg-gray-100 p-1 rounded-md'
)

I want to override the style, for example, if the input is wrong, like this:

<StyledTextInput
  textContentType="password"
  placeholder="Password"
  placeholderTextColor="grey"
  secureTextEntry={true}
  onBlur={onBlur}
  onChangeText={onChange}
  value={value}
  className={errors.passwordField ? 'border-red-500' : ''}
/>

However, it won't always work. But sometimes it will.

Let me show you:

If in the second code snipped (where I do the conditional styling) I add "p-6" to the className, it looks as expected, with an increased padding:

enter image description here

But if I add "p-5", the original className is used and the value is not overriden. And it looks like this:

enter image description here

This is not even consystent. For "p-2", "p-4" and >=6 it will work, but not for "p-5" and "p-3". Something symilar happens with the color. The original className does not get overridden with 'border-red-500' but it does with 'border-red-700' or 'border-red-800'...

enter image description here

Edit: Thanks to the comments, I now understand that the application of the styles is not based on "className" hierarchy, but rather following the “stylesheet”. Can I change or predict how the stylesheet is built by Tailwind?

Additionally, Is there any way I could include the conditional formatting in the "original" styled component (StyledTextInput), so it is consistent across screens and I don't have to be overriding?

Guillem Poy
  • 391
  • 5
  • 18
  • I would recommend using the debugging panel on your browser to see how the styles are being applied to the element. – Haroldo_OK Dec 02 '22 at 10:08
  • When selectors have equal specificity (as they do here, both are a single class name) the last one does override … but its the last one *in the stylesheet* not the last one in the class attribute. – Quentin Dec 02 '22 at 10:14
  • @Haroldo_OK The latest "className" style is being overridden by the previous one: https://i.imgur.com/3LzxNJ8.png – Guillem Poy Dec 02 '22 at 10:15
  • @Quentin I am not setting up any stylesheet. Can you please explain what are you referring to? Thanks! – Guillem Poy Dec 02 '22 at 10:16
  • 2
    @GuillemPoy — You *are* setting up a stylesheet, you're just doing so very abstractly by delegating the writing of the CSS to Tailwind. – Quentin Dec 02 '22 at 10:17
  • @Quentin and is there anywhere I could tell tailwind in which order I want the stylesheet? Or any workaround? – Guillem Poy Dec 02 '22 at 10:18
  • I do believe the question has been wrongly marked as duplicate. I have found the answer here: https://www.skies.dev/override-tailwind-prose Basically use "!" in front of the property, and it will be marked as “important” and will properly override the previous one. However, I don't know what will happen if you try to override an "important" property... – Guillem Poy Dec 02 '22 at 10:50

0 Answers0