Why are all these form styles applied?

[spassvogel]

This is the content of my input.css, this is converted into bundle.css by npx tailwindcss.

@tailwind base;
@tailwind components;
@tailwind utilities;

I dont have any css declarations myself, I just use the built-in classes provided by tailwind. However when I add a <select> html element to my page (not using any classes) , a bunch of styling is added to it. Including some huge paddings and a background image.

I understand tailwind does a bit of CSS reset during preflight. But where are all these changes to form inputs coming from? The preflight documentation makes no mention of these things...

select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
  -webkit-print-color-adjust: exact;
     color-adjust: exact;
          print-color-adjust: exact;
}

[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;
}

Where does this come from and how do I disable this?

[wongjn]

That styling seems to be coming from the @tailwindcss/forms Tailwind plugin. You can either:

• Remove the plugin from the plugins array.
• Use the strategy: 'class' option to only style form elements selectively.

[spassvogel]

Okay thanks a lot! That clears it up