Tailwind Margin

The margin utility class in Tailwind CSS allows you to easily add margin to elements, creating space between elements or between an element and its parent. It provides a set of classes that enable you to specify the margin in different directions, allowing you to create consistent spacing in your layouts.

Setting Tailwind Margin

To apply Tailwind margin to an element, you can use the m-{size} class, where {size} can be one of the following options:

• m-0: This sets the margin to 0, removing any space around the element.

• m-1: This sets a small margin size.

• m-2: This sets a medium margin size.

• m-3: This sets a large margin size.

• m-4: This sets an extra-large margin size.

• m-5: This sets a huge margin size.

You can also use the mx-{size} and my-{size} classes to set the horizontal and vertical margin, respectively. For example, mx-2 sets the horizontal Tailwind margin to a medium size, and my-4 sets the vertical Tailwind margin to an extra-large size.

<div class="flex m-4">
  <div class="mt-10... ">mt-10</div>
  <div class="mb-10... ">mb-10</div>
  <div class="ml-10...">ml-10</div>
</div>

Preview

Tailwind Responsive Margin

Tailwind CSS provides responsive utility classes for margin, allowing you to control the margin size at different breakpoints. To use responsive Tailwind margin classes, you can append the breakpoint prefix to the margin classes. For example, md:m-2 sets the margin size to medium starting from the medium breakpoint and above

<div class="m-4 md:m-2">
  This is a div with margin.
</div>

Tailwind Margin Class

Windframe Tailwind blocks

Landing page

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.