This content originally appeared on DEV Community and was authored by DEV Community
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!
This content originally appeared on DEV Community and was authored by DEV Community
DEV Community | Sciencx (2021-10-09T11:02:33+00:00) Build a good looking <input> with Tailwind CSS. Retrieved from https://www.scien.cx/2021/10/09/build-a-good-looking-input-with-tailwind-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.