How to Style File Inputs with Tailwind CSS

Updated: May 9, 2022 By: Pennywise 3 comments

In Tailwind CSS, You can combine the file modifier (a modifier is just a prefix that can be added to the beginning of a class) with other utility classes to create a custom beautiful file input, such as file:bg-amber-500, file:text-sm, etc.

You can also style your file input button when the mouse is hovering over it by using the hover modifier, like this: hover:file:text-amber-700, hover:file:bg-rose-500, etc.

For more clarity, please see the example below.

Preview:

The code:

<body class="p-20">
    <form>
        <!-- the first file input -->
        <label>
            <input type="file" class="text-sm text-grey-500
            file:mr-5 file:py-2 file:px-6
            file:rounded-full file:border-0
            file:text-sm file:font-medium
            file:bg-blue-50 file:text-blue-700
            hover:file:cursor-pointer hover:file:bg-amber-50
            hover:file:text-amber-700
          " />
        </label>
        <div class="h-6"></div> <!-- just add some space -->

        <!-- the second file input -->
        <label>
            <input type="file" class="text-sm text-grey-500
            file:mr-5 file:py-3 file:px-10
            file:rounded-full file:border-0
            file:text-md file:font-semibold  file:text-white
            file:bg-gradient-to-r file:from-blue-600 file:to-amber-600
            hover:file:cursor-pointer hover:file:opacity-80
          " />
        </label>
    </form>
</body>

That’s it. Further reading:

You can also check out our CSS category page for the latest tutorials and examples.