How to style HTML file input using Tailwind CSS?

Question

When I encountered this issue it took me about 20 minutes to find the answer in an article here: https://www.kindacode.com/snippet/how-to-style-file-inputs-with-tailwind-css/

I had scrolled though many pages of overly complicated answers on existing similar questions on Stackoverflow

Posting the solution here so that people can quickly find the answer

---

Following the examples provided in the question here Styling an input type="file" button I tried a bunch of solutions that weren't quite satisfactory

I tried wrapping the input in a label element and setting the display to none

<label className="text-sm bg-stone-200 hover:bg-stone-300" htmlFor="fileUpload">
    <input type="file" className="hidden" id="fileUpload"/>
    Upload File
</label>

which works, but then you lose the file name preview - solutions for this involved putting a <span> between the label and the hidden input and altering the span element in the onChange event.. I think thats too much code for such a simple task

I also tried setting the size with the element attribute <input type="file" size={60} /> which apparently worked for other people, but had no effect when I tried

Firenew

Answer 1

Solution:

<input
   type="file"
   className="text-sm text-stone-500
   file:mr-5 file:py-1 file:px-3 file:border-[1px]
   file:text-xs file:font-medium
   file:bg-stone-50 file:text-stone-700
   hover:file:cursor-pointer hover:file:bg-blue-50
   hover:file:text-blue-700"
/>

Works for me without any onChange event handlers or label wrappers

Thanks to Pennywise on KindaCode. Full article where I found the solution here: https://www.kindacode.com/snippet/how-to-style-file-inputs-with-tailwind-css/

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.

Firenew

Cool, I didn't know about the file prefix. This is also in the Tailwind documentation. tailwindcss.com/docs/… – Beagle

This is some seriously buried in the docs stuff. Nice work. – Lionel

Answer 2

Style based on shadcn

<input className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-foreground file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50" id="picture" name="picture" type="file">

Venus