Published on

How to Style HTML File Inputs with Tailwind CSS

Authors
  • Name
    Ripal & Zalak
    Twitter

How to Customize HTML File Inputs with Tailwind CSS

Styling HTML file input elements can be tricky, but Tailwind CSS simplifies this task with its utility-first approach. In this guide, we’ll explore how to customize file inputs using Tailwind CSS, along with practical examples.

Basic File Input Styling with Tailwind CSS

Here is a straightforward solution to style a file input:

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

Explanation of Classes Used:

  1. file: Modifier: Tailwind's file: prefix allows you to style the file input button directly.
    • Example: file:bg-stone-50 applies a light gray background to the button.
  2. hover: Modifier: Styles when hovering over the file input button.
    • Example: hover:file:bg-blue-50 changes the button background to light blue on hover.
  3. Spacing Utilities:
    • file:mr-5: Adds margin to the right of the file input button.
    • file:py-1 and file:px-3: Add padding to the button for better spacing.

Custom File Input with File Name Preview

If you need a preview of the uploaded file’s name, wrap the input in a label:

<label className="block text-sm font-medium text-gray-700">
  <input type="file" className="hidden" id="fileUpload" />
  <span
    className="inline-flex items-center px-3 py-1.5 bg-blue-600 text-white rounded-md cursor-pointer hover:bg-blue-700"
  >
    Upload File
  </span>
</label>

This method provides a styled button while keeping the input itself hidden. You can add a span element to display the file name dynamically with JavaScript if needed.

Advanced Styling with shadcn

For more sophisticated styling, you can use an advanced Tailwind configuration inspired by 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="fileInput"
  name="fileInput"
  type="file"
/>

This example incorporates:

  • Responsive Sizing: Ensures the input looks good on all screen sizes.
  • Enhanced Focus States: Uses focus-visible utilities for accessibility.
  • Disabled Styles: Handles cases where the input is disabled.

FAQs

1. What is the file: prefix in Tailwind CSS?

The file: prefix is a utility modifier in Tailwind CSS that allows you to style the file input button directly. For example, file:bg-blue-50 changes the button’s background color.

2. How do I hide the default file input button?

You can use the hidden class on the file input and wrap it in a styled <label> element. This lets you customize the appearance while maintaining functionality.

3. Can I preview the uploaded file name?

Yes, you can use JavaScript to update a <span> or <div> element to display the uploaded file name dynamically. For example:

document.getElementById('fileUpload').addEventListener('change', function (e) {
  const fileName = e.target.files[0]?.name || 'No file selected'
  document.getElementById('fileNamePreview').textContent = fileName
})