Tailwindcss: Add my-auto

[spyric]

Hello.

Adding "auto" suffix to margin vertical utilites can be usefull with flexbox:

<div class="h-half bg-grey-lighter flex">
    <div class="ml-auto flex flex-col justify-end p-12 text-right">
        <h2 class="my-auto text-5xl font-extrabold uppercase">Centered on rest block</h2>
        <a href="#" class="ml-auto bg-brand text-white w-64 py-3 no-underline text-center font-sans font-medium tracking-wide rounded-xl">Some button text</a>
    </div>
</div>

How it's currently looks

How I'm expected to be

[adamwathan]

This is super interesting and is the first time I've ever seen vertical margins of auto do anything at all 😄

I think what we're going to do is add this to the core utility set hardcoded like the horizontal auto variations for now, and then in the next breaking release (0.2.0) we'll move all of it out to the config, so you'll just have an 'auto': 'auto' value in your Tailwind config file under margins.

[adamwathan]

In the mean time don't forget it's incredibly easy to add these to your own project:

@tailwind preflight;

@responsive {
  .mt-auto { margin-top: auto; }
  .mb-auto { margin-bottom: auto; }
  .my-auto { @apply .mt-auto .mb-auto; }
}

@tailwind utilities;