Here's my code: https://play.tailwindcss.com/6e1ovq2LZC?layout=preview (set your browser's zoom to 500%)
this is how the input with the buttons look like
As you can see, the left border of the first button is overlapping with the border of the text input, while the border of the second button is laying flat against the border of the first button. This causes problems with alignment, such as adding margin directly to the buttons' classes (ml-2) as you can see next.
Changing the borders' width does nothing as far as I can tell. When removing the border the elements will still act as if there is a border there for the placement of items.
CodePudding user response：
The problem is that buttons are positioned as absolute and .left-0 pushing it all the way to the left. Try to use .left-px class or set manualy as left: 1px; Since you need border 1px wide