1

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>
MagnusEffect
  • 3,363
  • 1
  • 16
  • 41

1 Answers1

2

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

Dhaifallah
  • 1,437
  • 1
  • 5
  • 19
  • Not working . Please test your approach on tailwind play before posting here. – MagnusEffect Aug 05 '22 at 12:23
  • @RosePark I posted here after I tested my answer, but have a look I updated my answer. – Dhaifallah Aug 05 '22 at 12:34
  • it is not showing any spacing in the link you shared – MagnusEffect Aug 07 '22 at 07:54
  • @RosePark just to make sure that I understood you correctly, you want spacing between the button `Browse...` and the text `No file selected.` right? if so I'm pretty sure it worked, I increased the `mr-4` to `mr-20` it's more obvious now https://play.tailwindcss.com/scMYVnSVjY – Dhaifallah Aug 07 '22 at 08:51
  • I found that due to my old version of chrome in my laptop it is showing as nothing changed but on checking on my mobile , I saw its working . This is what I want. – MagnusEffect Aug 07 '22 at 11:56