Tailwind CSS Classes

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

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

Preview

Are you tired of writing HTML by hand?

CSS source

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

More Tailwind CSS classes in Spacing category

© 2024 Shuffle. All rights reserved.