title: How to prevent Tailwind from applying default style (Tailwind + Braintree hosted fields integration issue)
body: <p>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.</p>
  <p><a href="https://i.stack.imgur.com/QNzus.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QNzus.png" alt="card number field with unwanted white stripe in the center" /></a></p>
  <p>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.</p>
  <p>Tailwind CSS causing the issue:</p>
  <pre><code>[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;
  }
  </code></pre>
  <p>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):</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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);
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://js.braintreegateway.com/web/3.85.3/js/client.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://js.braintreegateway.com/web/3.85.3/js/hosted-fields.min.js"&gt;&lt;/script&gt;
  &lt;div class="ml-4 mt-2"&gt;
    &lt;form id="payment" method='post'&gt;
      &lt;label for="card-number"&gt;Card Number&lt;/label&gt;
      &lt;div id="card-number" class="hosted-field"&gt;&lt;/div&gt;
  
      &lt;label for="cvv"&gt;CVV&lt;/label&gt;
      &lt;div id="cvv" class="hosted-field"&gt;&lt;/div&gt;
  
      &lt;label for="expiration-date"&gt;Expiration Date&lt;/label&gt;
      &lt;div id="expiration-date" class="hosted-field"&gt;&lt;/div&gt;
  
      &lt;input type="hidden" id="nonce" name="payment_method_nonce" value=""&gt;
      &lt;input class="w-40 px-4 py-2 rounded bg-green-500 text-white text-lg font-semibold" type="" value="Pay" disabled /&gt;
    &lt;/form&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>