marklawlor / nativewind

React Native utility-first universal design system - powered by Tailwind CSS
https://nativewind.dev
MIT License
4.3k stars 233 forks source link

TextInput: text color and placeholder color conflict #856

Open stesvis opened 1 month ago

stesvis commented 1 month ago

Describe the bug It appears that you can't set the placeholder color and the text color in a TextInput without conflicting with each other. The last class name that you use overwrites the previous one.

To Reproduce Steps to reproduce the behavior:

  // 1
  <StyledTextInput className="text-blue-500 placeholder-red-500" placeholder="Enter something" />
  // 2
  <StyledTextInput className="placeholder-red-500 text-blue-500" placeholder="Enter something" />

Expected behavior

  1. The placeholder should be red. As you start typing, the text color should be blue
  2. The placeholder should be red. As you start typing, the text color should be blue

Actual behavior

  1. The placeholder is red. As you start typing, the text color remains red
  2. The placeholder is blue. As you start typing, the text color remains blue

Expo Snack https://snack.expo.dev/@stesvis/hello-world

How do you get test color and placeholder color to work together?