[Vuejs]-Why are these buttons with exactly the same classes different widths?

3đź‘Ť

âś…

I was told not to mark my own question as solved so I am writing the solution I found here.

The problem was mixing Tailwind and Bulma. The solution was using is-fullwidth instead of w-full. Bulma applied a margin that checked for is-fullwidth but obviously had no idea about w-full.

Modifying the “buttons” or “button” classes wasn’t working but I know now that I needed to use .buttons:not(:last-child) {}. However, switching to is-fullwidth makes much more sense.

👤Joshua Bizley

0đź‘Ť

If both buttons have same padding, it might just be the length of the text of the button. “Declaim” is longer than “Claim”.

Try adding a fixed width and box-sizing: border-box; to include the padding in the width.

Also the default position of a is inline-block. Try making setting it to block.

👤Max Kehayov

Leave a comment