DEV Community

Cover image for Building a Tailwind CSS file upload input component
Zoltán Szőgyényi for Themesberg

Posted on • Originally published at flowbite.com

Building a Tailwind CSS file upload input component

Tailwind CSS is a framework that I've been using quite a lot lately and there's one particular problem that has been slowing my development process: the lack of components.

Although I love the new way of building websites with the utility classes, I do miss having a couple of web components to use right away when building new interfaces.

Tailwind CSS file upload component

That is why I decided to start a tutorial series here on the DEV community where I show you how to build commonly used web components with the utility classes from Tailwind CSS.

Last time I showed you how to build checkbox and radio input fields and today I will show you how to build a nicely looking file upload input component with Tailwind CSS.

Let's get started!

Tailwind CSS file upload component

First things first, we need to set up the HTML markup for the file upload input.

<label for="user_avatar">Upload file</label>
<input aria-describedby="user_avatar_help" id="user_avatar" type="file">
<div id="user_avatar_help">A profile picture is useful to confirm your are logged into your account</div>
Enter fullscreen mode Exit fullscreen mode

As you can see we already added the for and id attributes.

Let's add some styles to the label element:

<label class="text-sm font-medium text-gray-900 block mb-2" for="user_avatar">Upload file</label>
<input aria-describedby="user_avatar_help" id="user_avatar" type="file">
<div id="user_avatar_help">A profile picture is useful to confirm your are logged into your account</div>
Enter fullscreen mode Exit fullscreen mode

Looking better! Now the important part: we need to style the input itself. Let's add some styles for that.

<label class="text-sm font-medium text-gray-900 block mb-2" for="user_avatar">Upload file</label>
<input class="block w-full cursor-pointer bg-gray-50 border border-gray-300 text-gray-900 focus:outline-none focus:border-transparent text-sm rounded-lg" aria-describedby="user_avatar_help" id="user_avatar" type="file">
<div id="user_avatar_help">A profile picture is useful to confirm your are logged into your account</div>
Enter fullscreen mode Exit fullscreen mode

Let's also add some style to the helper text below.

<label class="text-sm font-medium text-gray-900 block mb-2" for="user_avatar">Upload file</label>
<input class="block w-full cursor-pointer bg-gray-50 border border-gray-300 text-gray-900 focus:outline-none focus:border-transparent text-sm rounded-lg" aria-describedby="user_avatar_help" id="user_avatar" type="file">
<div class="mt-1 text-sm text-gray-500" id="user_avatar_help">A profile picture is useful to confirm your are logged into your account</div>
Enter fullscreen mode Exit fullscreen mode

You may ask: but it still doesn't look good. Why is that? The reason is because we still have to write some pseudo styles for the input file button.

Add the following styles in your CSS file which is configured for the Post CSS compilation:

input[type=file]::-webkit-file-upload-button,
input[type=file]::file-selector-button {
    @apply text-white bg-gray-700 hover:bg-gray-600 font-medium text-sm cursor-pointer border-0 py-2.5 pl-8 pr-4;
    margin-inline-start: -1rem;
    margin-inline-end: 1rem;
}
Enter fullscreen mode Exit fullscreen mode

After you've added this code the final HTML with the classes should look something like this:

Tailwind CSS file upload component

Congratulations, you've build a file upload component using the utility classes from Tailwind CSS!

Before you go, I would like to inform you that this Tailwind CSS file upload component is part of a larger and open-source Tailwind CSS component library called Flowbite.

Flowbite - Tailwind CSS component library

You can check out Flowbite and start making websites even faster with a set of commonly used web components such as buttons, alers, navigation bars, modals, and more using the utility classses from Tailwind CSS.

Discussion (6)

Collapse
uithemes profile image
ui-themes

Ty! Any chance to provide a drop-zone component?

Collapse
zolidev profile image
Zoltán Szőgyényi Author

A dropzone element exists for the pro version of Flowbite:

flowbite.com/pro/

Collapse
sm0ke profile image
Sm0ke

This component is really useful.
🚀🚀

Collapse
admindashboards profile image
admin-dashboards

Nice, thanks for sharing!

Collapse
grimlink profile image
Sean van Zuidam

Nice tutorial 😉

But you can also mix CSS Components from other CSS Frameworks with TailwindCSS, saving you some manual work.
For example Fylgja or Bulma.

Collapse
zolidev profile image
Zoltán Szőgyényi Author

Or just take the components from Flowbite. :)