How to set input full width on mobile devices in tailwind?

The solution to your problem is to swap w-6/12 and sm:w-full. They should instead be w-full sm:w-6/12.

Here's why:

The tailwind documentation specifically recommends against targeting against smaller screens by using the sm prefix. Tailwind is "mobile first" which means your default (un-prefixed) styles should be your mobile styles, and you should provide overrides to address the extra space at higher resolutions.

Here's a screenshot from the mobile-first section of the tailwind documentation:

The takeaway from this is that tailwind breakpoints operate as >= operators. When you prefix sm, it means "anything at 640px or more". Here's the table of tailwind size breakpoints:

Try to change the order of the classes, Example:

 <div class="mt-4 width">
    <div class="mt-1 w-full md:w-6/12">
       <select
          type="email"
          autocomplete="email"
          class="block w-full bg-gray input-color-gray input-color-gray font-roboto-100 rounded-md sm:text-sm p-3 bg-gray pr-4"
          >
          <option>Make</option>
       </select>
    </div>
 </div>

This way you can customize the width according to your requirements and include other breakpoints to the class: sm, md, lg, xl