Full width button group with tailwindCSS

Question

Seriously, How do you make TailwindCSS button group span the full witdh ? For simple buttons, you could use btn-block, but that wont work once you start using button groups.

Could you please add some code others could use to give an answer to this question and move your (currently selected) answer into the "what you've tried" bucket? — vhs, Apr 21 '22 at 09:44

score 0 · Accepted Answer · answered Jan 01 '22 at 21:46

Okay as, i was righting this I found the answer, but still went ahead to publish this, cause I didnt find answers else where....

So I ended up using tailwind witdh classes documented here

  <div class="btn-group">
    <button class="btn w-1/2 btn-outline btn-primary ">Save</button> 
    <button class="btn w-1/2 btn-outline ">Cancel</button> 
  </div>

so the class w-1/2 gives a 50% width, i'm using this caus I have only 2 buttons in my button group, so you should adjust accordingly depending on the number of buttons.

The draw back with this technique, is that it can become complex if you want to add buttons dynamically. put still doable.

Full width button group with tailwindCSS

1 Answers1