Tailwind CSS Classes

Tailwind CSS class .flex-shrink / .flex-shrink-0

<div class="flex bg-gray-200">
  <div class="flex-none text-center bg-teal-400 p-2 m-2">Lorem ipsum dolor sit amet, consectetur</div>
  <div class="flex-shrink text-center bg-teal-400 p-2 m-2">
    Lorem ipsum dolor sit amet, consectetur 
    adipiscing elit. Pellentesque justo purus, 
    vulputate at ipsum eget, posuere facilisis 
    libero. Proin et pulvinar felis.
  </div>
  <div class="flex-none text-center bg-teal-400 p-2 m-2">Lorem ipsum dolor sit amet, consectetur</div>
</div>
<div class="flex bg-gray-200">
  <div class="flex-shrink text-center bg-teal-400 p-2 m-2">Lorem ipsum dolor sit amet, consectetur</div>
  <div class="flex-shrink-0 text-center bg-teal-400 p-2 m-2">
    Lorem ipsum dolor sit amet, consectetur 
    adipiscing elit. Pellentesque justo purus, 
    vulputate at ipsum eget, posuere facilisis 
    libero. Proin et pulvinar felis.
  </div>
  <div class="flex-shrink text-center bg-teal-400 p-2 m-2">Lorem ipsum dolor sit amet, consectetur</div>
</div>

Preview

Are you tired of writing HTML by hand?

CSS source

.flex-shrink { flex-shrink: 1; }
.flex-shrink-0 { flex-shrink: 0; }

More Tailwind CSS classes in Flex category

© 2024 Shuffle. All rights reserved.