TailwindCSS: How to have 3 input fields vertically without overlapping?

HTML-CSS
1

I have 3 input fields line up vertically.

  1. The bottom border of the first and second input boxes are missing when they are in focus.
  2. The bottom border of the first and second input fields seems to be thicker.
  3. Can the shadow-outline color be changed?
  4. Is there a better class to use to have a border around the input box besides shadow-outline?

Thank you.

<form class='flex flex-col items-center justify-center h-screen' action="/" method="post">
  <input class='border-gray-400 border-2 focus:shadow-outline' type="text" name="first" id="first" placeholder="First input">
  <input class='border-gray-400 border-2 focus:shadow-outline' type="text" name="second" id="second" placeholder="Second input">
  <input class='border-gray-400 border-2 focus:shadow-outline' type="text" name="third" id="third" placeholder="Third input">
</form>

Link to sandbox:

2

Hello there,

As what you are asking is relatively simple, in terms of CSS, I am assuming you are asking for a solution using the tailwindCSS?

I would start by adding something like m-1 as a class, because the borders are the same weight, but two of them are touching.

For the others, i recommend you look at a cheat-sheet for tailwind: https://dev.to/gojutin/printable-tailwindcss-cheatsheet-cji

Hope this helps

3

Thank you for the reply.

I can insert inline style for “margin-bottom: -2px” so that the border overlap each other. Is there a way to achieve that with tailwindcss?

I check out the cheatsheet (thank you), but I could not get a solution for the missing bottom blue border when the input fields (top and middle input) are in focus.

4

Unfortunately, you cannot do everything with CSS frameworks. For that, they would need basically as many options as pure CSS styles have, which makes them pointless. You, are going to have to include some styles of your own. Personally, I use BootStrap a lot, but only for positioning; if ever there is a colour/style i want to change, I use CSS.

As for your “missing” border. You need to use CSS for this, and have a focus selector change the z-index of an element, to ensure the border is not behind the adjacent elements.

Hope this helps

5

Thank you very much for your replies. They have been most helpful.