Right-Align Buttons with Tailwind justify-end

justify-end pushes everything right

Wrap your buttons in a flex justify-end container and they sit against the right edge — the modern replacement for float: right. Add gap-3 to space multiple buttons.

<div class="flex justify-end gap-3">
  <button>Cancel</button>
  <button>Save</button>
</div>

.actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

One left, one right: ml-auto

For a toolbar with a title on the left and a button on the right, keep flex and add ml-auto to the right-hand button. It soaks up the free space and slides itself to the edge — no justify-between needed.

<div class="flex items-center">
  <h2>Settings</h2>
  <button class="ml-auto">Save</button>
</div>

Dialog action rows

The flex justify-end gap-3 pattern is the standard for modal and form footers, with Cancel next to Save. If you want the destructive action kept far from the safe one, add mr-auto to it so it stays on the left while the rest group on the right.

Common mistakes

Reaching for float: right. It is legacy, needs clearfixes, and does not vertically align — flexbox replaces it.

Using text-right. That only affects inline text, not a block-level button.

Forgetting the container must be flex. justify-end and ml-auto both need a flex parent.

Frequently asked questions

How do I right align a button in Tailwind?

Put it in a flex justify-end container, or add ml-auto to the button inside an existing flex row.

What replaces float: right in Tailwind?

Flexbox. Use flex justify-end on the parent, or ml-auto on the element you want pushed to the right.

How do I align one button left and one right?

Use a flex row and add ml-auto to the button that should sit on the right; the other stays on the left.