Tailwind CSS Classes

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

<div class="space-y-0 bg-gray-300 m-2 h-64 inline-flex flex-col">
    <div class="bg-teal-400 h-6 w-6"></div>
    <div class="bg-teal-400 h-6 w-6"></div>
    <div class="bg-teal-400 h-6 w-6"></div>
</div>
<div class="space-y-4 bg-gray-300 m-2 h-64 inline-flex flex-col">
    <div class="bg-teal-400 h-6 w-6"></div>
    <div class="bg-teal-400 h-6 w-6"></div>
    <div class="bg-teal-400 h-6 w-6"></div>
</div>
<div class="space-y-12 bg-gray-300 m-2 h-64 inline-flex flex-col">
    <div class="bg-teal-400 h-6 w-6"></div>
    <div class="bg-teal-400 h-6 w-6"></div>
    <div class="bg-teal-400 h-6 w-6"></div>
</div>
<div class="space-y-px bg-gray-300 m-2 h-64 inline-flex flex-col">
    <div class="bg-teal-400 h-6 w-6"></div>
    <div class="bg-teal-400 h-6 w-6"></div>
    <div class="bg-teal-400 h-6 w-6"></div>
</div>

Preview

Are you tired of writing HTML by hand?

CSS source

.space-y-0 { margin-top: 0; }
.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.