DEV Community

sid
sid

Posted on • Updated on • Originally published at easyui.dev

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>
Enter fullscreen mode Exit fullscreen mode

We should definitely add some margins to the element.

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

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
Enter fullscreen mode Exit fullscreen mode

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

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

We should give our input a border radius

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

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Here's what our input should look like now πŸ‘‡

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

Top comments (6)

Collapse
 
alfiqmiq profile image
Marek

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

Collapse
 
xerullian profile image
Patrick Nolen • Edited

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...

Collapse
 
alfiqmiq profile image
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...

Collapse
 
spock123 profile image
Lars Rye Jeppesen

Great stuff, thank you

Collapse
 
mike_andreuzza profile image
Michael Andreuzza

let's forget accessibility....

Collapse
 
sidcraftscode profile image
sid • Edited

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.