9

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

Improve this question

2 Answers 2

Reset to default
19

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Cool, I didn't know about the file prefix. This is also in the Tailwind documentation. tailwindcss.com/docs/…
This is some seriously buried in the docs stuff. Nice work.
Searched the entire internet for this ;)
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">
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.