LEARN

Tailwind CSS Space Between

This class accepts lots of values in tailwind CSS in which all the properties are covered as in class form. It is the alternative to the CSS Space Between property. This class is used for controlling the space between child elements.

In Tailwind CSS, the Space Between utilities allow you to control the Space Between of chield element. The key classes include:

  • space-y-0
  • space-y-reverse
  • -space-y-0
  • space-x-0
  • space-x-reverse
  • -space-x-0
  • Note: You can change the number “0” with the valid “rem” values.

Tailwind css space-y-0

This class is used to perform space on the y-axis.

1
2
3 
<div class=" space-y-4 bg-indigo-200 w-full text-center rounded-md p-4 mx-16  mt-4 ">
        <div class=" py-3 bg-indigo-600 text-white rounded-lg">1
        </div>
        <div class=" py-3 bg-indigo-600 text-white rounded-lg">2
        </div>
        <div class=" py-3 bg-indigo-600 text-white rounded-lg">3
        </div>
    </div>

Tailwind Css space-y-reverse

This class is used to perform reverse spacing on the y-axis, but have to use the flex-reverse class before that.

1
2
3 
<div class="flex flex-col-reverse space-y-4 space-y-reverse bg-indigo-200 w-full text-center rounded-md p-4 mx-16  ">
        <div class=" py-3 bg-indigo-600 text-white rounded-lg">1
        </div>
        <div class=" py-3 bg-indigo-600 text-white rounded-lg">2
        </div>
        <div class=" py-3 bg-indigo-600 text-white rounded-lg">3
        </div>
    </div>

Tailwind Css -space-y-0

This class is used for negative spacing on the y-axis. By using this class we can place one element inside another element.

1
2
3 
<div class=" -space-y-4 bg-indigo-200 w-full text-center rounded-md p-4 mx-16 mt-4 ">
        <div class="border border-white py-4 bg-indigo-700 text-white rounded-lg">1
        </div>
        <div class="border border-white py-4 bg-indigo-600 text-white rounded-lg">2
        </div>
        <div class="border border-white py-4 bg-indigo-500 text-white rounded-lg">3
        </div>
    </div>

1000+ Tailwind Blocks

Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.

Explore More

Tailwind css space-x-0

This class is used to perform space on the x-axis.

1
2
3 
<div class="flex space-x-4 bg-indigo-200 w-full text-center rounded-md p-4 mx-16  mt-4 ">
        <div class="py-3 flex-1 bg-indigo-600 text-white rounded-lg">1
        </div>
        <div class="py-3 flex-1 bg-indigo-600 text-white rounded-lg">2
        </div>
        <div class="py-3 flex-1 bg-indigo-600 text-white rounded-lg">3
        </div>
    </div>

Tailwind Css space-x-reverse

This class is used to perform reverse spacing on the x-axis, but have to use the flex-reverse class before that.

1
2
3 
<div class="flex flex-row-reverse space-x-4 space-x-reverse bg-indigo-200 w-full text-center rounded-md p-4 mx-16  ">
        <div class="flex-1 py-3 bg-indigo-600 text-white rounded-lg">1
        </div>
        <div class="flex-1 py-3 bg-indigo-600 text-white rounded-lg">2
        </div>
        <div class="flex-1 py-3 bg-indigo-600 text-white rounded-lg">3
        </div>
    </div>

Tailwind Css -space-x-0

This class is used for negative spacing on the x-axis by using this class we can place one element inside another element.

1
2
3 
<div class="flex -space-x-4 bg-indigo-200 w-full text-center rounded-md p-4 mx-16 mt-4 ">
        <div class="flex-1 border border-white py-4 bg-indigo-700 text-white rounded-lg">
            1
        </div>
        <div class="flex-1 border border-white py-4 bg-indigo-600 text-white rounded-lg">
            2
        </div>
        <div class="flex-1 border border-white py-4 bg-indigo-500 text-white rounded-lg">
            3
        </div>
    </div>

Figma

You can also find this component in Figma. Check the Pagedone Figma Design System.

Preview Buy Now
image

1000+ Tailwind Blocks

Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.

Explore More