Tailwind CSS Classes

Tailwind CSS class .-space-y-1 / .-space-y-*

<div class="-space-y-12 h-64 bg-gray-300 m-2 inline-flex flex-col">
    <div class="bg-teal-200 h-32 w-6"></div>
    <div class="bg-teal-400 h-24 w-6"></div>
    <div class="bg-teal-600 h-12 w-6"></div>
</div>

Preview

Are you tired of writing HTML by hand?

CSS source

.-space-y-1 { margin-top: -0.25rem; }
.-space-y-2 { margin-top: -0.5rem; }
.-space-y-3 { margin-top: -0.75rem; }
.-space-y-4 { margin-top: -1rem; }
.-space-y-5 { margin-top: -1.25rem; }
.-space-y-6 { margin-top: -1.5rem; }
.-space-y-8 { margin-top: -2rem; }
.-space-y-10 { margin-top: -2.5rem; }
.-space-y-12 { margin-top: -3rem; }
.-space-y-16 { margin-top: -4rem; }
.-space-y-20 { margin-top: -5rem; }
.-space-y-24 { margin-top: -6rem; }
.-space-y-32 { margin-top: -8rem; }
.-space-y-40 { margin-top: -10rem; }
.-space-y-48 { margin-top: -12rem; }
.-space-y-56 { margin-top: -14rem; }
.-space-y-64 { margin-top: -16rem; }
.-space-y-px { margin-top: -1px; }

More Tailwind CSS classes in Spacing category

© 2024 Shuffle. All rights reserved.