Search code examples
htmlcssvue.jsbulmatailwind-css

Why are these buttons with exactly the same classes different widths?

I have two buttons.

enter image description here

They have exactly the same classes.

enter image description here

But one is inexplicably wider than the other.

enter image description here

enter image description here

All other buttons on the page render full width like the "Declaim" button. There's nothing to the right of these buttons. I have tried refreshing my browser cache and Laravel's view cache. The classes you see are from Tailwind and Bulma and haven't been touched by me other than:

.button:active {
    position:relative;
    top:2px;
}

What could be happening here?

Update:

In response to Phix and Saqib, yes, it did have a grandparent with flex but I

  • Deleted all custom css in app.scss
  • Created a demo component with nothing but a container with a div of class "buttons"
  • Rendered it alone directly inside main

And incredibly I still have the same problem. Without the div of class "buttons", the buttons are the same size. But I can't work out why "buttons" would be doing this.

Update 2

This is what happens when I set a fixed width:

enter image description here

Someone probably knows exactly what is wrong looking at that? I unfortunately don't.

Solution

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