Use of `file` Variant

Learn how to use the `file` variant to style file inputs in TailwindCSS and enhance the appearance of file upload buttons.

The file variant in TailwindCSS allows you to style the button of an input of type file. This is useful when you want to customize the appearance of the file input in your application, making it more visually appealing and consistent with your design system.

<div>
    <input 
        type="file" 
        accept="image/*"
        className="outline-hidden p-1 text-sm text-gray-600 file:mr-2 file:px-3 file:h-9 file:rounded-full file:bg-gray-200 file:text-sm file:text-title file:transition-[filter] file:duration-200 hover:file:brightness-95 active:file:brightness-90 focus-visible:file:ring-2 focus-visible:file:ring-offset-2 focus-visible:file:ring-primary-600" 
    />
</div>

Usage

To implement the file variant, apply the file: prefix to any TailwindCSS utility class. This allows you to style the file input button directly.

<div>
    <input 
        type="file" 
        accept="image/*"
        className="outline-hidden p-1 text-sm text-gray-600 file:mr-2 file:px-3 file:h-9 file:rounded-full file:bg-gray-200 file:text-sm file:text-title file:transition-[filter] file:duration-200 hover:file:brightness-95 active:file:brightness-90 focus-visible:file:ring-2 focus-visible:file:ring-offset-2 focus-visible:file:ring-primary-600" 
    />
</div>

Example

Here are two examples of styled file inputs using the file variant:

Solid Button

<div>
    <input 
        type="file" 
        accept="image/*"
        className="outline-hidden p-1 text-sm text-gray-600 focus-visible:file:ring-2 focus-visible:file:ring-offset-2 focus-visible:file:ring-indigo-500 file:mr-2 file:px-3 file:h-9 file:rounded-full file:bg-indigo-500 file:text-sm file:text-white file:transition-[filter] file:duration-200 hover:file:brightness-95 active:file:brightness-90" 
    />
</div>

Outlined Button

<div>
    <input 
        type="file" 
        accept="image/*"
        className="outline-hidden p-1 text-sm text-gray-600 focus-visible:file:ring-2 focus-visible:file:ring-offset-2 focus-visible:file:ring-indigo-500 file:mr-2 file:px-3 file:h-9 file:rounded-full file:border file:border-gray-300 file:text-sm file:text-gray-950 file:transition-[filter] file:duration-200 hover:file:bg-gray-50 hover:file:brightness-95 active:file:brightness-90" 
    />
</div>

You can combine different classes to create unique styles and enhance the user experience of your application. By leveraging the power of TailwindCSS’s file variant, you can ensure that your file input buttons are not only functional but also visually appealing and consistent with your design system. Experiment with various utility classes to achieve the perfect look and feel for your file inputs, and provide your users with a seamless and enjoyable experience.

On this page