How to Make a File Upload Button with Tailwind CSS

In this section we will create file upload button in Tailwind CSS. We will also see file upload button ui, file upload button with icon, file upload Icon-only button example with tailwind css.

Let's create a basic file upload button using Tailwind CSS.

<div>
  <label for="file-upload"
    class="cursor-pointer inline-flex items-center justify-center px-4 py-2 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-blue-600 hover:bg-blue-500 active:bg-blue-700 focus:outline-none focus:border-blue-700 focus:shadow-outline-blue transition duration-150 ease-in-out">
    <span>Upload File</span>
  </label>
  <input id="file-upload" type="file" class="hidden" />
</div>

tailwind css file upload button

Create a simple Tailwind CSS button with only an upload icon.

<div>
  <label for="icon-file-upload"
    class="cursor-pointer inline-flex items-center justify-center p-2 rounded-full bg-gray-200 hover:bg-gray-300 focus:outline-none focus:bg-gray-300 transition duration-150 ease-in-out">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
      class="w-6 h-6 text-gray-600">
      <path stroke-linecap="round" stroke-linejoin="round"
        d="M12 16.5V9.75m0 0 3 3m-3-3-3 3M6.75 19.5a4.5 4.5 0 0 1-1.41-8.775 5.25 5.25 0 0 1 10.233-2.33 3 3 0 0 1 3.758 3.848A3.752 3.752 0 0 1 18 19.5H6.75Z" />
    </svg>
  </label>
  <input id="icon-file-upload" type="file" class="hidden" />
</div>

tailwind css file upload icon button only

Tailwind CSS file upload button with icon.

<div>
  <label for="file-upload"
    class="cursor-pointer inline-flex items-center justify-center px-4 py-2 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 active:bg-indigo-700 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo transition duration-150 ease-in-out">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
      class="-ml-1 mr-1 h-5 w-5">
      <path stroke-linecap="round" stroke-linejoin="round"
        d="M12 16.5V9.75m0 0 3 3m-3-3-3 3M6.75 19.5a4.5 4.5 0 0 1-1.41-8.775 5.25 5.25 0 0 1 10.233-2.33 3 3 0 0 1 3.758 3.848A3.752 3.752 0 0 1 18 19.5H6.75Z" />
    </svg>
    <span>Upload File</span>
  </label>
  <input id="file-upload" type="file" class="hidden" />
</div>

tailwind file upload button with icon