Sign in button in Authenticator.SignIn Component clashes with Nativewind 4

### Before creating a new issue, please confirm:

- [X] I have [searched for duplicate or closed issues](https://github.com/aws-amplify/amplify-ui/issues?q=is%3Aissue+) and [discussions](https://github.com/aws-amplify/amplify-ui/discussions).
- [X] I have tried disabling all browser extensions or using a different browser
- [X] I have tried deleting the node_modules folder and reinstalling my dependencies
- [X] I have read the guide for [submitting bug reports](https://github.com/aws-amplify/amplify-ui/blob/main/CONTRIBUTING.md#bug-reports).

### On which framework/platform are you having an issue?

React Native

### Which UI component?

Authenticator

### How is your app built?

Expo Go

### What browsers are you seeing the problem on?

iOS (React Native)

### Which region are you seeing the problem in?

_No response_

### Please describe your bug.

The Sign In button becomes text white with no background colour when Nativewind v4 is installed.

### What's the expected behaviour?

The expected behaviour is for the "Sign in" button to be visible

### Help us reproduce the bug!

- Use the basic example of the authenticator component [here](https://ui.docs.amplify.aws/react-native/connected-components/authenticator).
- Install Nativewind v4
- The button will not be visible anymore

### Code Snippet

metro.config.js
```javascript
const { getDefaultConfig } = require('expo/metro-config');
const { withNativeWind } = require('nativewind/metro');

const config = getDefaultConfig(__dirname);

module.exports = withNativeWind(config, { input: './global.css' });
```

tailwind.config.js
```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./**/*.{js,jsx,ts,tsx}'],
presets: [require('nativewind/preset')],
theme: {
screens: {
xs: '480px',
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
xxl: '1440px',
xxxl: '1600px',
},
fontSize: {
xs: ['12px', '12px'],
sm: ['14px', '14px'],
base: ['16px', '22px'],
lg: ['18px', '24px'],
xl: ['20px', '20px'],
'2xl': ['24px', '28px'],
'3xl': ['32px', '36px'],
},
fontFamily: {
body: ['ProximaNova-Regular', 'Arial', 'Helvetica', 'sans-serif'],
heading: ['ProximaNova-Semibold', 'Arial', 'Helvetica', 'sans-serif'],
},
},
plugins: [],
};

```

global.css
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```

babel.config.js
```javascript
module.exports = function (api) {
api.cache(true);
return {
presets: [['babel-preset-expo', { jsxImportSource: 'nativewind' }], 'nativewind/babel'],
};
};
```

### Console log output

_No response_

### Additional information and screenshots

There must be conflict in the styling for it to affect the Sign in button.
Another way to potentially address this is to style the button directly however the documentation doesn't provide any example on how to style the Sign In button in React Native.

I also tried to add global css styling but that too did not work.

Start with the React Native Authenticator example and the provided metro.config.js, tailwind.config.js, global.css, and babel.config.js setup to reproduce the conflict with Nativewind v4. Trace the Sign In button styling and verify that it remains visible with its background color when the example runs under this setup.

Written by the indexing model from the issue text.