How to style HTML file input using Tailwind CSS?

Quick Fix: To style an HTML file input using Tailwind CSS, add the following custom CSS class to your HTML:

<input className="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" />

The Solutions:

Solution 1: Using HTML and CSS

“`html

“`

This solution allows you to style the file input using HTML and CSS, providing a simple and efficient way to achieve the desired customization without the need for additional wrappers or event handling.

Solution 2: Using Shadcn’s Tailwind CSS Class

This solution leverages a custom Tailwind CSS class provided by Shadcn. The class is designed specifically for styling HTML file inputs and offers a comprehensive set of options:

Flex-based layout for responsive styling
Customized height and width for precise control
Rounded-edge styling for a modern look
Border and background customization
File input-specific styles, including border removal, transparent background, and text styling
Placeholder text customization
Focus styling with outline and ring
Disabled state styling for accessibility

To use this class, simply add it to your HTML file input element as shown in the provided code snippet:

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

Q&A

Can you provide information on styling an HTML file input using Tailwind CSS?

—

You can use the file modifier with other utility classes to create a custom file input, such as file:bg-amber-500, file:text-sm, etc.

Is there a one line solution for input styling in Tailwind?

—

Yes, you can use a single line of code like this: <input type="file" className="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"/>

Video Explanation:

The following video, titled "Tailwind CSS Full Course for Beginners | Complete All-in-One ...", provides additional insights and in-depth exploration related to the topics discussed in this post.