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!