How to make a good looking text input with Tailwind CSS

Tailwind CSS is a utility based framework. Which is great in many ways. However, Tailwind CSS does not have a default set of components for you to get started with.

This is a series that will show you how to build various common UI components with Tailwind CSS

Today, we're going to be learning how to make a (good looking) text input with Tailwind CSS

First, we can start by creating an <input> element

<input type="text" placeholder="Enter some text..."></input>

We should definitely add some margins to the element.

<input type="text" class="m-2" placeholder="Enter some text..."></input>

As you can see, our input looks pretty blank.
This is because Tailwind CSS removes default browser styles. We can give our input a default look by installing the @tailwindcss/forms plugin. Use npm or yarn to install the plugin in your project.

# Using npm
npm install @tailwindcss/forms

# Using Yarn
yarn add @tailwindcss/forms

Then add the plugin to your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/forms'),
    // ...
  ],
}

We should give our input a border radius

<input type="text" class="rounded-lg m-2" placeholder="Enter some text..."></input>

The border is pretty dark, so we should give it a lighter shade of gray.

<input type="text" class="border-gray-300 rounded-lg m-2" placeholder="Enter some text..."></inpu

It would also be nice to add some shadow to our <input>

<input type="text" class="shadow-sm border-gray-300 rounded-lg m-2" placeholder="Enter some text..."></input>

Now we can add the focus styles. We change the ring-width to 2 when it is focused and change the border and ring colors.

<input type="text" class="shadow-sm border-gray-300 rounded-lg m-2 focus:ring-2 focus:ring-indigo-200 focus:border-indigo-400" placeholder="Enter some text..."></input>

Here's what our input should look like now 👇

Thanks for reading, and I'll be releasing some more posts soon!

Comments

[Marek]

And another example how to ... You shouldn't work... Big library instead few lines of CSS...

[Patrick Nolen]

Tailwind CSS has a purge option. When used in building for production, it removes all unused CSS making the build size very small.

tailwindcss.com/docs/optimizing-fo...

[Marek]

I believe that learning CSS is a much better solution than learning CSS overlay. Instead of learning something that has limited possibilities, it is better (looking ahead) to learn CSS (possibly SASS / SCSS) to know how and why to use specific things. Unfortunately, nowadays in many places there is a stupid rule to load ready-made libraries instead of learning how to use documentation for certain things and shorten everything to a few lines of code (HTML, CSS or JS). Then people wonder why in one project everything works quickly and in another it seems the same but the browser gets crazy. Of course you can always say get yourself a faster computer...

[Lars Rye Jeppesen]

Great stuff, thank you

[Michael Andreuzza]

let's forget accessibility....

[sid]

Tell me what you think! Comment here if you have any ideas to make my component look better or if you have any feedback in general of my post.