awssat / tailwindo

🔌 Convert Bootstrap CSS code to Tailwind CSS code
MIT License
1.09k stars 108 forks source link

Add support for flex-grow and flex-shrink #45

Closed davidmyersdev closed 3 years ago

davidmyersdev commented 3 years ago

Closes #44.

Summary

https://getbootstrap.com/docs/4.6/utilities/flex/#grow-and-shrink

The CSS utilities for flex-grow and flex-shrink are not yet supported in tailwindo. This PR adds support for the various combinations of values and media breakpoints.

./tailwindo --recursive=true --extensions=vue --replace=true Example.vue

Before

<!-- Example.vue -->
<template>
  <div class="flex-shrink-1 flex-grow-0 flex-md-grow-1 flex-sm-shrink-1 flex-lg-shrink-0"></div>
</template>

After

<!-- Example.vue -->
<template>
  <div class="flex-shrink flex-grow-0 md:flex-grow sm:flex-shrink lg:flex-shrink-0"></div>
</template>