Tailwindcss: Pin Sizes

[dbpolito]

I just came with the need of having pin sizes, like: pin-r-2 and pin-r-2.

I can totally open a PR for that, just wanted to see if other folks also thinks it's a good addition.

[adamwathan]

Hey! So far I've tried to avoid needing these by recommending that people use the existing pin utilities but combine them with margin utilities to push elements away from the edge, so pin-r-2 would be pin-r mr-2. Does that work for your use case? If not totally open to discussing the situation and figuring out what the best solution is.

[dbpolito]

I agree with @aparajita , i think they are different situations for directly having on pin or magin.

with code:

<div
    class="w-1/5 p-2 relative group opacity-50 hover:opacity-100"
    v-for="(item, key) in section.items"
    :key="key"
>
    <button class="absolute p-1 opacity-25 hover:opacity-100 text-grey-darker" style="top: 1.25rem; right: 1.25rem;">
        <i class="fas fa-cog"></i>
    </button>

    ...
</div>

While margin works, it looks a workaround for me... I'm fine with having my custom pin-r-x for my project, but i think this would be useful for other people.

And i think it would be useful to have a size similar to width, as % makes sense of pinning, specially the full = 100% one for submenus...

[adamwathan]

Yeah so in that example I would definitely be using padding on a pin-t pin-r element personally; to me it just feels nicer to be able to compose several primitive to achieve things like this instead of having the same set of values duplicated for top/right/left/bottom again. I also think pin is the wrong name if things aren't actually pinned to the edge anymore; top-4 right-4 seems like better naming to me.

I'm not opposed to adding this at some point but since "no is for now, yes is forever", I'm going to say no to adding this at the moment, and instead recommend building it as a plugin.

Thanks!