Tailwind CSS Classes

Tailwind CSS class .space-x-reverse / .space-y-reverse

<div class="space-x-reverse space-x-4 bg-gray-300 m-2 inline-flex text-center flex-row-reverse">
    <div class="bg-teal-200 h-6 w-6">1</div>
    <div class="bg-teal-400 h-6 w-6">2</div>
    <div class="bg-teal-600 h-6 w-6">3</div>
</div>

<div class="space-y-reverse space-y-4 bg-gray-300 m-2 inline-flex text-center flex-col-reverse">
    <div class="bg-teal-200 h-6 w-6">1</div>
    <div class="bg-teal-400 h-6 w-6">2</div>
    <div class="bg-teal-600 h-6 w-6">3</div>
</div>

Preview

Are you tired of writing HTML by hand?

CSS source

.space-x-reverse { --space-x-reverse: 1 }
.space-y-reverse { --space-y-reverse: 1 }

More Tailwind CSS classes in Spacing category

© 2024 Shuffle. All rights reserved.