Search code examples
csstailwind-csstailwind-uitailwind-in-jstailwind-variants

How can I add spacing in file upload button


I wanted to add spacing between the Choose Files button and the text on right side. How can I do so by tailwind CSS. I had added the code below .

<script src="https://cdn.tailwindcss.com"></script>
<section class="body-font text-gray-600">
  <div class="container mx-auto px-5 py-24">
    <div class="mx-auto flex flex-col items-start lg:w-2/3">
      <label class="title-font mb-2 text-sm font-medium text-gray-900" for="multiple_files">Upload multiple files</label>
      <input class="w-full cursor-pointer rounded-lg border border-gray-300 bg-gray-100 px-4 py-2 text-lg text-gray-600 file:rounded-lg file:border-none file:bg-indigo-600 file:p-2 file:text-white hover:file:cursor-pointer hover:file:bg-indigo-500" id="multiple_files" type="file" multiple="" />
    </div>
  </div>
</section>


Solution

  • you can add margin-right to file, use this selector file:mr-4

    <input class="file:mr-4" id="multiple_files" type="file" multiple="" />
    
    

    have a look here : https://play.tailwindcss.com/scMYVnSVjY