How to prevent Tailwind from applying default style (Tailwind + Braintree hosted fields integration issue)

Question

I'm having an issue getting Tailwind to play nice with Braintree's hosted fields. The issue is that for the card number field, Tailwind seems to be applying some styles that make the field look weird (has a white stripe in the middle). See below.

I have identified the piece of CSS code that makes this happen, but I am not sure what I can do to stop it. I would like Tailwind to NOT apply those styles. How can I accomplish that? Or if there is a better way, I am open to suggestions.

Tailwind CSS causing the issue:

[type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  border-radius: 0px;
  padding-top: 0.5rem;
  padding-right: 0.75rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-shadow: 0 0 #0000;
}

Full code snippet (can't use the inputs, possibly due to them being iframes but the issue can still be seen by uncommenting the CSS):

var form = document.querySelector('#payment');
var submit = document.querySelector('input[type="submit"]');

braintree.client.create({
  authorization: 'sandbox_g42y39zw_348pk9cgf3bgyw2b'
}, function (clientErr, clientInstance) {
  if (clientErr) {
    console.error(clientErr);
    return;
  }

  braintree.hostedFields.create({
    client: clientInstance,
    styles: {
      'input': {
        'font-size': '16pt',
        'color': '#3A3A3A'
      },
      '.number': {
        'font-family': 'monospace'
      },
      'input.valid': {
        'color': 'green'
      },
      'input.invalid': {
        'color': 'red'
      }
    },
    fields: {
      number: {
        container: '#card-number',
        placeholder: '4111 1111 1111 1111'
      },
      cvv: {
        container: '#cvv',
        placeholder: '123'
      },
      expirationDate: {
        container: '#expiration-date',
        placeholder: '10/2022'
      }
    }
  }, function (hostedFieldsErr, hostedFieldsInstance) {
    if (hostedFieldsErr) {
      console.error(hostedFieldsErr);
      return;
    }

    submit.removeAttribute('disabled');

    form.addEventListener('submit', function (event) {
      event.preventDefault();
      submit.setAttribute('disabled', 'disabled');

      hostedFieldsInstance.tokenize(function (tokenizeErr, payload) {
        if (tokenizeErr) {
          submit.removeAttribute('disabled');
          console.error('Error in pay form')
          console.error(tokenizeErr);
          return;
        }
        // set nonce to send to the server
        document.getElementById('nonce').value = payload.nonce;
        // submit form
        form.submit();
      });
    }, false);
  });
});

form div.hosted-field {
  font-size:13px;
  color:#666;
  width:300px;
  height:40px;
  margin-bottom:10px;
  padding:6px 12px;
  border:0;
  background:#efefef;
  color:#666;
  border-radius:4px;
}

/* NOTE: Comment section below to see how it all should look */
[type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  border-radius: 0px;
  padding-top: 0.5rem;
  padding-right: 0.75rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-shadow: 0 0 #0000;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"/>
<script src="https://js.braintreegateway.com/web/3.85.3/js/client.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.85.3/js/hosted-fields.min.js"></script>
<div class="ml-4 mt-2">
  <form id="payment" method='post'>
    <label for="card-number">Card Number</label>
    <div id="card-number" class="hosted-field"></div>

    <label for="cvv">CVV</label>
    <div id="cvv" class="hosted-field"></div>

    <label for="expiration-date">Expiration Date</label>
    <div id="expiration-date" class="hosted-field"></div>

    <input type="hidden" id="nonce" name="payment_method_nonce" value="">
    <input class="w-40 px-4 py-2 rounded bg-green-500 text-white text-lg font-semibold" type="" value="Pay" disabled />
  </form>
</div>