Create File Upload Button in Tailwind CSS

In this section, we will create a file upload button in Tailwind CSS. We will also explore the file upload button UI, a file upload button with an icon, and an icon-only file upload button example using Tailwind CSS.

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

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>

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

Tailwind CSS

<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 button with icon.

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-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>

View Demo

saim ansari