Tailwind Support

[Joe-Lonsdale]

Before submitting a feature request

• I have searched the existing issues to ensure this feature hasn't been requested already.
• I am using the latest version of the library.

Feature description

It would be nice to be able to provide a className prop to style using Tailwind

[amitpdev]

Hi @Joe-Lonsdale ,

1. Environment: Are you primarily using this with React Native Web (Expo Web) or with NativeWind for cross-platform Tailwind support?

2. Styling granularity: Which parts of the component would you like to style with className? For example:

   <GooglePlacesTextInput
     className="..." // Container
     inputClassName="..." // Text input field
     suggestionsClassName="..." // Suggestions dropdown
     suggestionItemClassName="..." // Individual suggestion items
   />

3. Priority: When both style and className are provided, should className take precedence, or should they merge?

4. Scope: Are you looking for this to work:

   • Only on web (React Native Web)?
   • Cross-platform with NativeWind?
   • Both scenarios?

5. Example usage: Could you share a small code example of how you'd ideally like to use this feature?

[newyorksoul]

I'm not OP, but to answer your questions:

1. I'm using NativeWind for cross-platform Tailwind support, including React Native Web.
2. All four elements—container, input, suggestions dropdown, and individual suggestion items—should support className.
3. Styling should merge, with the most recent class taking precedence for any duplicate styles, ensuring consistency across platforms, including web.
4. This should function similarly to how React Native's style prop works, but using Tailwind/NativeWind's className instead.
5. Ideally, usage would look like this:

<GooglePlacesTextInput className="rounded-md border border-gray-300 p-2" inputClassName="text-lg text-black" suggestionsClassName="bg-white shadow-md" suggestionItemClassName="py-2 px-4 hover:bg-gray-100" />

or for mixed use
<GooglePlacesTextInput className="p-4 bg-white rounded-md border border-gray-300 text-black" style={{ padding: 8, borderColor: 'blue', backgroundColor: '#f5f5f5' }} />

I imagine border color should be 'blue' for mixed use, not 'border-gray-300' for the second example